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