Webpack建筑工程失败(11)

Question

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

对于普通的_name() {}，似乎没有transpile风格的函数。

我认为，除非另有规定，否则它应该直接进入通用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/速记-属性插件到babel-loader选项的.vue文件。

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

Answer 2

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

您正在使用ES6的速记属性( iE不支持该属性)，您需要配置babel配置，以便将其转换为旧版本(有关浏览器支持的更多信息，请访问此链接)。

要使您的babel配置与ie兼容，请在babelrc中使用如下内容

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

  ]
}

如果这不起作用，请尝试更改webpack中的devtool配置(例如，将eval改为其他配置)，并检查github的这条线