尝试设置 webpack 来构建我的 .js
和 .vue
文件。
似乎无法将 _name() {}
样式函数转换为常规 JavaScript。
除非另有说明,否则认为它应该开箱即用,直接进入 commons js。
不知道为什么,它只在 IE 中崩溃,有一些关于分号不当的通用 JS 语法错误。
我猜是某个小旗子、设置、某物、某处。
在这里寻找一些建议。
前 View
<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"
]
}
注意:每个插件也需要作为依赖项安装。
最佳答案
由于是自定义的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'
}
关于vue.js - IE 的 Webpack 构建失败 (11),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52982625/