webpack 打包 ES6 扩展运算符时出错

Posted on Edited on In Views:

1 问题描述

1
2
3
4
5
6
7
8
9
10
11
ERROR in ./src/router.jsx
Module build failed (from ./node_ modules/babel-loader/lib/index.js):
SyntaxError: C:/desk/copyiceworks/src/router.jsx: Unexpected token (36:55)

<Switch>
    {routes.map((route, id) => {
        const { component: RouteComponent, children, ...others ] = route;

    return (
        <Route
            key={id}

2 解决方案

安装 babel-preset-stage-3

1
npm install babel-preset-stage-3 --save-dev

修改配置文件，增加 'stage-3'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react', 'stage-3'],
                }
            },
            exclude: /node_modules/
        }
    ]
}

不过从 Babel v7 开始，所有针对处于标准提案阶段的功能所编写的预设（stage preset）都已被弃用。详见 官方说明。针对上述问题，在 7.6.x 中使用 @babel/plugin-proposal-object-rest-spread 插件：

1
npm install @babel/plugin-proposal-object-rest-spread --save-dev

附加内容：升级到 Babel 7.x 相关的名称改变：

  • babel-core → @babel/core
  • babel-loader 名称未改变
  • babel-preset-react → @babel/preset-react
  • babel-preset-es2015 → @babel/preset-es2015，但是有提示如下：
1
2
3
npm WARN deprecated @babel/preset-es2015@7.0.0-beta.53: ????
We've deprecated any official yearly presets in 6.x in favor or babel-preset-env.
For 7.x it would be @babel/preset-env.

因此，在 7.x 中，应安装 @babel/preset-env

注意：对应的配置文件也要修改名称

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react'],
                    "plugins": [
                        "@babel/plugin-proposal-object-rest-spread"
                    ]
                }
            },
            exclude: /node_modules/
        }
    ]
}