vue cli webpack 在 IE10 上中断

Question

现在我正在使用带有 webpack 配置的 vue-cli，这在 Internet Explorer 10 上有问题。问题是 webpack 没有将 let 或 const 转换为 var 并且 IE 10 不支持像 let 和 const 这样的 ES5 变量。

下面是webpack.base.conf.js代码。

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill','./src/main.js'],

  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

并且编译后的代码在 IE10 上抛出错误 SCRIPT1002，下面一行。

...let a = ...

然而，我所知道的是 webpack 基本上将 let 和 const 转换为 var 但是，结果不会。怎么强制转换？

Answer 1

问题是... 不是 vue 本身，而是 node_modules 中的包。其中一个包基本上没有被转译（在我的例子中，buefy 库），所以我必须手动转译。

解决方案

webpack.base.conf.js

将 buefy 添加到转译入口（据我所知，vue-cli webpack 会忽略 node_modules 中的包以解决性能问题）。
```
{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [/node_modules\/buefy/, resolve('src'), resolve('test')]
},
```

为导入手动转译包添加新别名。

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'buefy$': resolve('node_modules/buefy/src'),
  }
}

vue cli webpack 在 IE10 上中断

vue cli webpack breaks on IE10

webpack

vue-cli