`Unexpected token importer "dans". webpack.config.babel.js` lors de l'utilisation de `{modules: false}`

J'ai un projet React qui utilise Webpack que le module de bundler, et babel-loader de la transformer dans l'ES5, en utilisant les paramètres suivants:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader"
        }
      ]
    }
  ]
},

Les options sont définies dans un stand-alone .babelrc fichier.

Babel 6.13.0 prend en charge ECMAScript modules, ce qui signifie ECMAScript modules n'a pas besoin d'être transformé en CommonJS modules d'abord. Pour obtenir ce comportement, la documentation dit que nous devrions utiliser ce paramètre dans notre .babelrc.

{
  presets: [["es2015", { "modules": false }], "react"]
}

Cependant, lorsque j'essaie d'exécuter Webpack à l'aide de ce paramètre, il revient avec l'erreur:

$ ./node_modules/.bin/webpack
/home/d4nyll/foo/bar/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import

Je suppose que c'est parce que babel-loader n'agit pas sur les webpack.config.babel.js, et il n'est donc pas la reconnaissance de la import mot-clé. L'erreur n'apparaît pas lorsque { "modules": false } est supprimé, mais je veux que cette fonctionnalité. Comment puis-je obtenir Babel à reconnaître webpack.config.babel.js?

OriginalL'auteur d4nyll | 2017-01-22

13

La suite travaillé pour moi.

Ensemble .babelrc à la suivante:
```
{
  "presets": ["es2015"]
}
```
La .babelrc paramètres s'appliquent à la webpack.config.babel.js fichier.

Ensuite, modifier le Webpack configuration d'inclure les options que vous souhaitez appliquer à votre code d'application.
```
module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            "presets": [["es2015", {"modules": false}], "react"]
          }
        }
      ]
    }
  ]
},
```
Les paramètres de votre webpack config sera remplacée par votre .babelrc fichier, sauf si vous définissez babelrc: false
Qui ne semble pas être le cas, je viens de recevoir ceci de travail de 100% sans que
Vous obtiendrez la même erreur si vous exécutez webpack --config ./webpack.config.babel, pour le fixer exécuter webpack --config ./webpack.config.babel.js Vous avez besoin d'ajouter " js " pour le fichier de config
le env preset est recommandé par Babel dessus de tous les autres

OriginalL'auteur d4nyll
6

Juste pour souligner, comme vous le savez probablement: Votre erreur
```
`Unexpected token import` in `webpack.config.babel.js`...
```
a rien à faire avec la chose que vous construisez, uniquement avec votre webpack.config.babel.js. En dépit de son nom, ES6 n'est pas va fonctionner sans un peu de choses ont fait sûr de.

Choses à faire en sorte:

1) vous n'avez pas besoin de tout webpack.config.js, lorsque vous avez un webpack.config.babel.js dans votre projet.

2) assurez-vous que dans votre package.json, vous êtes sur Webpack Version 3 ou supérieure (1) à vrai

3) assurez-vous que vous avez un .babelrc contenant au moins env ou es2015
```
{ "presets": ["env"] }
```
4) assurez-vous d'avoir les deux installé
```
npm install babel-cli --save-dev
npm install babel-preset-env --save-dev
```
Respectivement babel-preset-es2015 selon votre .babelrc. (lire ici pourquoi env est sans doute un peu plus frais.)

Dans le point 2) vous parlez de package.json droit??
vrai. Corrigés.

OriginalL'auteur Frank Nocke
1

Si vous utilisez Webpack 2.6+ où import est cuit, assurez-vous d'utiliser cette babel plugin: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

OriginalL'auteur publicJorn
-1

Vous avez créé un webpack.config.js et quand liant à exécuter webpack vous obtenez l'erreur ci-dessus. La Cause de votre webpack fichier de configuration doivent être babelified avant de pouvoir l'utiliser,

1) Renommer votre webpack.config.js à webpack.config.babel.js.

2) Maintenant, créez un nouveau fichier webpack.config.js avec du suivant 2 lignes
```
require('babel-register');
module.exports = require('./webpack.config.babel.js');
```
3) créer un .babelrc fichier en parallèle de votre webpack.config.js fichier avec le contenu suivant. Nous avons besoin de dire babel explicitement ce prédéfini à utiliser.
```
{
  "presets": ["latest",'react', 'es2015','stage-2']
}
```
4) ajouter le nœud suivant des modules à votre dépendance ( Nécessaire pour les presets utilisés dans .babelrc)
```
npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev
```
5) Vous avez terminé . Maintenant, si vous exécutez webpack --progress --colors --watch il devrait fonctionner.

ad 2) N webpack.config.js est nécessaire (même pas un stub), si un webpack.babel.config.js est autour. [Voir ici[(stackoverflow.com/questions/46239512/...) Le .babelrc est en effet nécessaire (si vous voulez mettre ES6 dans ce fichier, qui est la raison derrière cela...).

OriginalL'auteur sapy

Vous devez vous connecter pour publier un commentaire.

Choses à faire en sorte: