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

Posted 2023-02-22

【中文标题】Webpacker、babel、uglifyjs-webpack-plugin - 不转换箭头函数，但仅在 Vue 文件中

【英文标题】：Webpacker, babel, uglifyjs-webpack-plugin - not transforming arrow functions, but only in Vue files

【发布时间】：2019-05-15 05:08:51

【问题描述】：

运行 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"]
    
  

这是我修改 webpacker 附带的 webpack 环境的整个 environment.js 文件（vue 加载器在底部）。

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';

然后在 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>

【问题讨论】：

你能粘贴 .vue 代码吗？

@ytbryan 添加了更多信息和一个基本的 Vue 组件。这样做时，我意识到我使用的方法定义样式与箭头函数不太一样......我是否误解了 babel 在这里可以做什么，而应该使用带有 data() 的箭头函数？跨度>

是的，注意Vue的数据是一个函数而不是一个对象。因此，您应该改用函数。我在 vue 组件中不使用箭头函数，因为我觉得它很麻烦。

【参考方案1】：

为了澄清起见：

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

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

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

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