IE 的 Webpack 构建失败 (11)

Question

正在尝试设置 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"
    ]
}

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

Answer 1

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

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

Answer 2

从输出中确认 shorthand 属性没有被转译

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

使您的 babel 配置兼容，即在 babelrc

中使用类似的东西

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

  ]
}

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

IE 的 Webpack 构建失败 (11)

Webpack build fails for IE (11)

webpack

vue.js

babeljs

babel-loader