Question

我使用Webpack来捆绑客户端和服务器代码，所以我的webpack.config.js看起来像：

module.exports = [
  { /* client config */ },
  { /* server config */ },
];

我想在两者中编写ES6（模块）并使用Babel将代码转换为ES5。

对于客户，可以使用babel-loader：

完成此操作

{
  test: /\.js$/,
  exclude:  /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: [
      'react',
      [
        'env',
        {
          targets: {
            'browsers': 'last 2 versions',
          },
        },
      ],
    ],
  },
}

基于此，我为服务器编写了babel loader：

{
  test: /\.js$/,
  exclude:  /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: [
      'react',
      [
        'env',
        {
          targets: {
            'node': 'current',
          },
        },
      ],
    ],
  },
}

有些东西告诉我babel-loader永远不会为此目的而工作。

运行webpack后，捆绑包位于正确的位置，但服务器入口点（server.js）未正确转换：

SyntaxError: Unexpected token import

通常，当我们要转换Node代码时，我们会使用babel-cli包并在package.json中添加脚本：

"scripts": {
  "build": "babel src -d dist"
}

并手动：

npm run build

我的问题是：如何在webpack.config.js内使用Babel for Node设置ES6进行转换？

+奖金

webpack.config.js

const path = require('path');

const babelRcClient = {
  presets: [
    'react',
    [
      'env',
      {
        targets: {
          'browsers': 'last 2 versions',
        },
      },
    ],
  ],
};
const babelRcServer = {
  presets: [
    'react',
    [
      'env',
      {
        targets: {
          'node': 'current',
        },
      },
    ],
  ],
};

const babelLoaderClient = {
  test: /\.js$/,
  exclude:  /node_modules/,
  loader: 'babel-loader',
  query: babelRcClient,
};
const babelLoaderServer = {
  test: /\.js$/,
  exclude:  /node_modules/,
  loader: 'babel-loader',
  query: babelRcServer,
};

module.exports = [
  {
    context: __dirname,
    entry: './shared/index.js',
    output: {
      path: path.resolve(__dirname, './static'),
      filename: 'bundle.js',
    },
    module: {
      loaders: [
        babelLoaderClient,
      ],
    },
    plugins: [],
  },
  {
    context: __dirname,
    entry: './server/server.js',
    target: 'node',
    output: {
      path: path.resolve(__dirname, './build'),
      filename: 'server.js',
      libraryTarget: 'commonjs',
    },
    externals: [ /^(?!\.|\/).+/i, ],
    module: {
      loaders: [
        babelLoaderServer,
      ],
    },
    plugins: [],
  },
]

Answer 1

指定

targets: {
    'node': 'current',
}

您告诉babel将您的代码转换为您用于转换代码的node版本。

您是否在生产中使用相同的节点版本？

尝试指定数字node版本，例如6.11.2然后运行transpilation。

你可以做的另一件事是告诉babel以ES6的方式离开ES6模块，不要用commonjs方法（默认）替换它，方法是设置：

targets: {
    'node': ...,
}, 
modules: false

Answer 2

这件事对我有用。尝试并检查一次。

                {
                    test: /\.(js|jsx)$/,
                    include: [].concat(
                        path.resolve('./app') //path to your application
                    ),
                    use: ['babel-loader']
                }

如何在Node中设置webpack以支持ES6模块

2 个答案: