Webpacker，babel，uglifyjs webpack插件-不转换箭头函数，但仅在Vue文件中

Question

运行webpacker 3.5.5(gem和包(。这基本上是有效的，但在IE11中，应用程序被破坏了，因为箭头功能似乎没有被转换。然而，检查缩小后的代码，似乎唯一没有转换箭头函数的地方是在我的vue组件中。

我想这是因为我的babel类属性插件没有以某种方式应用于我的Vue加载程序，但我还没能想出解决方案。

这是我的.babelrc

{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"IE 11"
],
"uglify": true
},
"useBuiltIns": true
}
]
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
[
"transform-class-properties",
{
"spec": true
}
]
],
"env": {
"test": {
"presets": ["es2015"]
}
}
}

这是我的整个environment.js文件，它修改了webpacker附带的webpack环境(vue-loader在底部(。

const { environment } = require('@rails/webpacker');
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
}]
});
const webpack = require('webpack');
// append some global plugins
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
axios: 'axios',
moment: 'moment-timezone',
_: 'lodash'
}));
// Necesary configuration for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin');
environment.plugins.append(
'VueLoaderPlugin',
new VueLoaderPlugin()
);
environment.loaders.append('vue', {
test: /.vue$/,
loader: 'vue-loader'
});
module.exports = environment;

编辑以获取更多信息：这是我的包"摔跤"的入口点

import 'babel-polyfill';
import 'wrestling';

然后在摔跤.js…

import './styles/wrestling'
import Rails from 'rails-ujs'
Rails.start();
import wrestlingSetup from './wrestlingSetup'
wrestlingSetup();

WrestlingSetup包含对vue文件的实际引用。我已经剪切了该文件，以显示文件中单个vue导入的样子。其余的基本相同。

import Vue from 'vue/dist/vue.esm'
// Redacted a bunch of imports, but they all look like this oen
import WrestlerCreate from './vue/wrestler_create.vue'
export default function() {
document.addEventListener('DOMContentLoaded', () => {
axiosSetup();
const app = new Vue({
el: '#app',
components: {
// Other vue components here that I've removed for simplicity
WrestlerCreate,
}
})
});
}

下面是Vue组件的一个实际示例

<template>
<div role="form">
<!-- other form elements -->
</div>
</template>
<script>
export default {
name: 'wrestler-create',
props: [
],
// This does not get transformed by babel 
data() {
return {
loading: false,
error: false,
errorMessage: "Error, please try again later or contact support.",
first_name: '',
last_name: '',
weight_class: '',
academic_class: ''
}
},
methods: {
// removed for simplicity
}
}
</script>

Answer 1

为了澄清起见：

请使用函数((获取数据。我发现函数((给我的麻烦比箭头函数少。

export default {
data: function() {
return {
message: "Hello something!",
secondMessage: "Hello world!" 
};
}
}

如果你真的想使用箭头功能，你可以写：

export default {
data: () => {
return {
message: "Hello something!",
secondMessage: "Hello world!" 
};
}
}