Discussion :

[dorus-one]

Salut � tous,

J'essaie de convertir, � l'aide de Webpack et de Babel, un script JS basique qui contient une instruction import en script contenant une instruction require donc ES5.
Mais ce transpilage, d'apparence simple, me pose un probl�me. Et malgr� le tourner dans tous les sens je n'arrive pas � me d�barasser de cette erreur :

ERROR in ./src/test/test-transpilling.js 1:0
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> import chalk from 'chalk';
| console.log(chalk.blue('Ceci est un test de transpilling ES6 -> ES5'));
ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

Voici ma configuration Webpack + Babel :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const  path                         = require('path')
const  nodeExternals                = require('webpack-node-externals')
 
const buildDir          = path.join(__dirname, '..', 'build')
const srcDir            = path.join(__dirname, '..', 'src')
const srcEntryFile      = path.join(__dirname, '..', 'src', 'test', 'test-transpilling.js')
 
const mode = 'development'
 
const webpackConfig = [
{
        entry: srcEntryFile,
 
        output: {
            clean: true,
            path: buildDir,
            publicPath: './build/',
            filename: 'test-transpilling.js'
        },
 
        mode,
        devtool: 'eval',
        target: 'node',
        externals: [nodeExternals()],
        stats: 'verbose',
 
        node: {
            __dirname: false,
            __filename: false
        },
 
        resolve: {
            alias: {"@": srcDir},
            extensions: ['js'],
        },
 
        module: {
            rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }]
        },
 
        plugins: []
    },
]
 
module.exports = webpackConfig

et mon fichier JS � convertir :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
import chalk from 'chalk'
 
 
console.log(chalk.blue('Ceci est un test de transpilling ES6 -> ES5'))

Pourquoi babel refuse de convertir mon instruction d'import ?
Quels options subtilit� d'import ai-je oubli� ?

Merci de votre �clairage

[dorus-one]

Pour continuer, j'essaie d'effectuer des conversions directement � l'aide de Babel d'un simple fichier javascript contenant une instructions 'import'.

J'ai ajout� un fichier de configuration babel � la racine de mon projet :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
{
"presets": [
[
        "@babel/preset-env",
	{
		"targets": {},
		"useBuiltIns": "usage",
		"corejs": "3.20.3"
	}
]]
}

et j'ai setter mon option browserslist dans mon package.js de la mani�re suivant :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
  "browserslist": {
    "production": [
      "last 1 electron version"
    ],
    "development": [
      "last 1 electron version"
    ]
  }

j'ai installer les packages n�cessaire � l'utilisation de babel suivants :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.11",

et j'effectue la commande suivant dans mon terminal pour tester la transpilation :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

λ babel src\test\test-transpilling.js --out-dir build\

RESULTAT :

Babel semble fonctionner car il execute sans erreur la commande et g�n�re bien un fichier. Malheureusement celui-ci ne contient aucune transformation de l'instruction import qui restera donc invalide pour ES2015.

Des id�es pour r�ussir � convertir un simple fichier ES6 en ES5 avec Babel et/ou accessoirement Webpack ?

Merci de votre �clairage