import - 在 webpack.config 中使用 ES6 import 和 export default

Question

我希望能够在我的 webpack.config 中使用 es6 导入和导出默认值。如果我像这样运行我的 webpack。

webpack.config.js

"webpack": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

我收到一个错误 SyntaxError: Unexpected token import，这是预期的。然后我在其他问题上找到了似乎对很多人都有效的解决方案。将文件重命名为 webpack.config.babel.js 并包含 babel-register。我试过了webpack.config.babel.js

"webpack": "cross-env NODE_ENV=development node -r babel-register node_modules/.bin/webpack-dev-server --config=webpack.config.babel.js"

但是现在我得到了这个错误

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError: missing ) after argument list

我尝试了更多与 babel-node 和 babel-register 的组合，但似乎没有任何效果。我使用的是 Windows 10。我该怎么做？

Answer 1

尝试直接运行 webpack，不用 babel-register:

"webpack": "cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --config=webpack.config.babel.js"

另外，确保在你的 .babelrc 文件中你有 babel-plugin-transform-es2015-modules-commonjs 插件，或者如果你正在使用es2015 预设，modules 选项设置为 true。如果你不希望 Babel 在其他情况下转译模块(例如制作生产包时)，你可以告诉 babel-loader 不要使用 .babelrc 并指定手动预设:

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    babelrc: false,
    presets: [
      ['latest', {
        modules: false,
      }],
    ],
  },
},