使用Gulp+Webpack解析Bootstrap 4的Modal.js时遇语法错误求助

这个问题我之前帮同事排查过，本质是Babel默认没有启用对象扩展运算符（...）的解析支持，而Modal.js里用到了...Default这种ES2018的语法，所以Webpack编译时抛出了错误。下面是几个可行的解决办法：

方法1：安装并配置Babel对象扩展插件 #

1. 先安装所需的Babel插件：

npm install --save-dev @babel/plugin-proposal-object-rest-spread
# 用yarn的话可以用这个命令
yarn add -D @babel/plugin-proposal-object-rest-spread

2. 修改你的Babel配置文件（.babelrc，没有的话直接新建一个），把插件添加进去：

{
  "presets": [
    // 保留你现有的preset，比如@babel/preset-env这类
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

方法2：直接在Webpack配置中配置Babel插件 #

如果你的Webpack配置里直接使用babel-loader，可以在loader的options里直接指定插件：

module.exports = {
  // ...其他Webpack配置项
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-object-rest-spread']
          }
        }
      }
    ]
  }
};

方法3：用@babel/preset-env自动适配目标环境 #

如果你已经在用@babel/preset-env，可以通过配置目标浏览器，让它自动引入所需的插件，不用单独安装：
修改.babelrc文件：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ]
}

preset-env会根据你指定的目标浏览器，自动判断需要启用哪些ES语法的解析插件，包括对象扩展运算符。

完成以上任意一种配置后，重新运行gulp scripts应该就能正常编译Modal.js了。

内容的提问来源于stack exchange，提问作者Carol.Kar