IE 的 Webpack 构建失败 (11)答案

【问题标题】：Webpack build fails for IE (11)IE 的 Webpack 构建失败 (11)
【发布时间】：2019-03-29 16:09:55
【问题描述】：

尝试设置 webpack 来构建我的 .js 和 .vue 文件。

似乎没有将 _name() {} 样式函数转换为常规 JavaScript。

认为它应该开箱即用，除非另有说明，否则直接进入 commons js。

不知道为什么，它只在 IE 中崩溃，出现一些关于分号不合适的通用 JS 语法错误。

我猜是一些小标志，设置，某处。

在这里寻找一些建议。

ex vue

<script>
    export default {
        computed: {
            _name() {
                return 'blah';
            }
        }
    };
</script>

package.json

"@babel/core": "7.0.0-beta.42",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42",
"@babel/preset-env": "7.0.0-beta.42",
"babel-loader": "8.0.0-beta.2",

"vue-loader": "9.5.1",

"vue-style-loader": "1.0.0",
"sass-loader": "3.2.3",
"node-sass": "^4.1.1",
"css-loader": "0.25.0",
"style-loader": "0.13.1",
"vue-html-loader": "1.2.3",
"file-loader": "^0.8.4",

"webpack": "3.4.1",
"webpack-dev-server": "1.16.1",
"webpack-stream": "3.2.0",
"copy-webpack-plugin": "3.0.1",
"replace-webpack-plugin": "0.1.2",
"uglifyjs-webpack-plugin": "1.2.7"

配置

entry: [__dirname + '/../src/bootstrap.js'],

output: {
    path: __dirname + '/../public',
    filename: 'app.min.js',
    chunkFilename: "[name].[chunkhash:4].js",
    publicPath: '/',
},

plugins: [
    new CopyWebpackPlugin(
        (function () {
            var copy = [{
                to: '',
                from: __dirname + '/../src/core/assets'
            }, {
                to: '',
                from: __dirname + '/../src/app/assets'
            }];

            if (data.copy) {
                copy.concat(data.copy);
            }

            return copy;
        })()
    ),

    new ReplacePlugin({
        skip: false,
        entry: 'src/index.html',
        output: '/public/index.html',
        hash: '[hash]',
        data: {
            scripts: data.scripts
        }
    })
],

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }
    }, {
        test: /\.vue$/,
        // exclude: /node_modules/,
        loader: 'vue-loader',

        options: {
            loaders: {
                js: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                sass: 'sass-loader'
            }
        }
    }]
}

构建看起来像这样

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

/* harmony default export */ __webpack_exports__["default"] = ({
  props: ['name', 'timeout', 'max'],
  computed: {
    _name() {
      return this.name || 'global';
    },

    ...

编辑：

最后，只需在根目录的.babelrc 文件中添加一些特定的转换插件即可。可能更好的方法是通过配置来做到这一点。花了一些时间将转换与每个错误相匹配，但以下设置对我有用。

{
    "plugins": [
        "@babel/plugin-transform-spread",
        "@babel/plugin-transform-destructuring",
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-template-literals",
        "@babel/plugin-transform-computed-properties",
        "@babel/plugin-transform-shorthand-properties"
    ]
}

注意：每个插件也需要作为依赖安装。

【问题讨论】：

附带说明：为什么不使用新的（官方）vue-cli 3 构建，其中整个构建配置被抽象为版本化的 npm 模块？
@ssc-hrep3 似乎仍然需要大量修补，而且它是一个现有项目，所以我只需要一个有效的构建。
请把你的 babel 配置添加到问题中，如果有的话。

标签： vue.js webpack babeljs babel-loader

【解决方案1】：

由于是自定义的 webpack 配置，不清楚 babel 是否有任何额外配置，请尝试将 @babel/plugin-transform-shorthand-properties 插件添加到 babel-loader 选项，用于 .vue 文件。

loaders: {
  js: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-transform-shorthand-properties']
    }
  },
  sass: 'sass-loader'
}

【讨论】：

这使我走上了正确的道路，如果有人来这里，请检查编辑以获取完整答案。

【解决方案2】：

从输出确认速记属性没有被转译

您使用的是 ES6 的简写属性，IE 不支持您需要配置 babel 配置，以便将其转换为旧版本（有关浏览器支持的更多信息，请访问 this link）

使您的 babel 配置兼容，即在 babelrc 中使用类似的东西

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
        "useBuiltIns": true
    }],

  ]
}

如果这不起作用，请尝试在 webpack 中更改 devtool 配置（例如将 eval 更改为其他内容）并检查 github 的 this thread

【讨论】：