Javascript 使用 `{modules: false}` 时 `webpack.config.babel.js` 中的 `Unexpected token import`
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41790153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
`Unexpected token import` in `webpack.config.babel.js` when using `{modules: false}`
提问by d4nyll
I have a React project which uses Webpack as the module bundler, and babel-loaderto transform it into ES5, using the following settings:
我有一个 React 项目，它使用 Webpack 作为模块打包器，并babel-loader使用以下设置将其转换为 ES5：
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
}
]
}
]
},
The options are set in a stand-alone .babelrcfile.
这些选项在独立.babelrc文件中设置。
Babel 6.13.0supports ECMAScript modules, which means ECMAScript modules doesn't need to be transformed into CommonJS modules first. To get this behaviour, the documentation says that we should use this setting in our .babelrc.
Babel 6.13.0支持 ECMAScript 模块，这意味着 ECMAScript 模块不需要先转换为 CommonJS 模块。为了获得这种行为，文档说我们应该在我们的.babelrc.
{
presets: [["es2015", { "modules": false }], "react"]
}
However, when I try to run Webpack using this setting, it comes back with the error:
但是，当我尝试使用此设置运行 Webpack 时，它返回错误：
$ ./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
I'm guessing this is because babel-loaderdoesn't act on webpack.config.babel.js, and so it's not recognising the importkeyword. The error does not appear when { "modules": false }is removed, but I want that functionality. How can I get Babel to recognise webpack.config.babel.js?
我猜这是因为babel-loader不对 采取行动webpack.config.babel.js，所以它无法识别import关键字。{ "modules": false }删除时不会出现错误，但我想要该功能。我怎样才能让 Babel 识别webpack.config.babel.js？
采纳答案by d4nyll
The following worked for me.
以下对我有用。
Set .babelrcto the following:
设置.babelrc如下：
{
"presets": ["es2015"]
}
The .babelrcsettings would apply to the webpack.config.babel.jsfile.
这些.babelrc设置将应用于webpack.config.babel.js文件。
Next, change the Webpack configuration to include the options you want applied to your application code.
接下来，更改 Webpack 配置以包含要应用于应用程序代码的选项。
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
"presets": [["es2015", {"modules": false}], "react"]
}
}
]
}
]
},
回答by Frank Nocke
Just to emphasize, as you probably know: Your error
只是强调一下，正如您可能知道的：您的错误
`Unexpected token import` in `webpack.config.babel.js`...
has nothingto do with the thing you are building, solely with your webpack.config.babel.js. Despite its name, ES6 is not gonna work without a few things made sure.
有没有跟你正在建设，只与你的东西webpack.config.babel.js。尽管有它的名字，但如果没有确定一些事情，ES6 将无法工作。
Things to make sure:
需要确保的事项：
1) you don't need anywebpack.config.js, when you have a webpack.config.babel.jsin your project.
1）当您的项目中有 a 时，您不需要任何。webpack.config.jswebpack.config.babel.js
2) make sure in your package.json, you are on Webpack Version 3 or higher for (1) to hold true
2) 确保在你的package.json, 你在 Webpack 版本 3 或更高版本上 (1) 成立
3) make sure you have a .babelrccontaining at least envor es2015
3）确保您.babelrc至少有一个包含env或es2015
{ "presets": ["env"] }
4) make sure to have the following two installed
4）确保安装了以下两个
npm install babel-cli --save-dev
npm install babel-preset-env --save-dev
Respectively babel-preset-es2015depending on your .babelrc. (read herewhy envis arguably a bit cooler.)
分别babel-preset-es2015取决于您的.babelrc. （在这里阅读为什么env可以说有点酷。）
回答by publicJorn
If you are using Webpack 2.6+ where importis baked in, make sure you use this babel plugin: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import
如果您使用的是 Webpack 2.6+ import，请确保使用此 babel 插件：https: //www.npmjs.com/package/babel-plugin-syntax-dynamic-import
回答by sapy
You have created a webpack.config.js and when tying to execute webpackyou are getting above error. Cause your webpack config file need to be babelifiedbefore you can use it,
您已经创建了一个 webpack.config.js 并且在绑定执行webpack时出现上述错误。因为你的 webpack 配置文件需要babelified在你可以使用它之前，
1) Rename your webpack.config.jsto webpack.config.babel.js.
1) 将您的重命名webpack.config.js为webpack.config.babel.js.
2) Now create a new file webpack.config.jswith just the following 2 lines
2）现在创建一个webpack.config.js只有以下两行的新文件
require('babel-register');
module.exports = require('./webpack.config.babel.js');
3) create a .babelrcfile in parallel to your webpack.config.jsfile with following content. We need to tell babel explicitly what preset to use.
3）创建一个.babelrc与您的webpack.config.js文件并行的文件，内容如下。我们需要明确告诉 babel 要使用什么预设。
{
"presets": ["latest",'react', 'es2015','stage-2']
}
4) add following node modules to your dependency ( Required for presets used in .babelrc)
4) 将以下节点模块添加到您的依赖项中（需要在 中使用的预设.babelrc）
npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev
5) You are done . Now if you execute webpack --progress --colors --watchit should work.
5）你完成了。现在，如果您执行webpack --progress --colors --watch它应该可以工作。
