如何在 vue 文件中转换箭头函数？答案

【问题标题】：How can i transpile arrow functions in vue files?如何在 vue 文件中转换箭头函数？
【发布时间】：2020-09-12 01:35:06
【问题描述】：

我有一个可以在 ES5 浏览器 (iOS 9) 中运行的 Vue 应用程序。

Vue 组件中的一些函数被转换为箭头函数：()=>，它破坏了 iOS9 Safari。而且我真的不明白为什么有些转换正确而有些则不正确。

例子：

这是一个 vue 组件的一部分：

    data() {
        return {
            birthday: '',
            accepted: false,
            acceptedForSelectedKids: false
        };
    },
    computed: {
        dataPrivacyLink() {
            return settings.data_privacy_link;
        },
        isOverFifTeen() {
            if (this.privacyToEdit && this.privacyToEdit.owner.age) {
                return this.privacyToEdit.owner.age > 15;
            }
            if (this.birthday) {
                return differenceInCalendarYears(new Date(), new Date(this.birthday)) > 15;
            }
            return false;
        }

data 和 dataPrivacyLink 函数被转换为箭头函数，而不是 isOverFifTeen 函数。

这是它的转译方式：

data:()=>({birthday:"",accepted:!1,acceptedForSelectedKids:!1}),computed:{dataPrivacyLink:()=>settings.data_privacy_link,isOverFifTeen(){return this.privacyToEdit&&this.privacyToEdit.owner.age?this.privacyToEdit.owner.age>15:!!this.birthday&&function(e,t){Object(c.a)(2,arguments);var o=Object(a.a)(e),n=Object(a.a)(t);return o.getFullYear()-n.getFullYear()}(new Date,new Date(this.birthday))>15}

这是 webpack 的配置方式：

                {
                    test: /\.vue$/i,
                    loader: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    loaders: ['babel-loader'],
                    exclude: [/node_modules/]
                },

这是babel.config.js：

module.exports = {
    presets: [['@babel/preset-env', { modules: false }]],
    plugins: ['@babel/plugin-syntax-dynamic-import'],
    env: {
        test: {
            presets: [['@babel/preset-env']]
        }
    }
};

在 package.json 我配置了要使用的浏览器：

"browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not ie <= 11",
    "ios_saf >= 9",
    "not dead"
  ]

如何停止这些箭头功能？

【问题讨论】：

这是一个有趣的问题...我想知道是否在您的函数中使用this 会导致此问题。能否请您删除所有 this 引用并再试一次？
我只在isOverFifTeen中使用这个。但那是我描述的唯一可以正确转换的功能。我将其实现更改为return false;，现在它也被转换为箭头函数。所以你的猜测是对的。但我的问题仍然存在。所以似乎所有包含this 的函数都没有转译为箭头函数。
也许这会有所帮助cli.vuejs.org/guide/browser-compatibility.html#browserslist
@A.L 我已经在使用浏览器列表了。我在最初的帖子中添加了它
我想这不是转译，而是将简单的函数内联到箭头函数中。从这个角度来看，isOverFifTeen 看起来相当复杂，这就是为什么没有内联到箭头函数中的原因。您希望将箭头函数转换为常用函数还是反之亦然？

标签： javascript vue.js webpack ecmascript-5 vue-loader

【解决方案1】：

如果您使用的是 Webpack 5，则需要在 ouput.environment 配置中指定要转译的功能，如下所述：https://webpack.js.org/configuration/output/#outputenvironment。

output: {
  // ... other configs
  environment: {
    arrowFunction: false,
    bigIntLiteral: false,
    const: false,
    destructuring: false,
    dynamicImport: false,
    forOf: false,
    module: false,
  },
}

【讨论】：

【解决方案2】：

尝试在 babel.config.js 中添加插件

module.exports = {
    presets: [['@babel/preset-env', { modules: false }]],
    plugins: [
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-transform-arrow-functions' // add this
    ],
    env: {
        test: {
            presets: [['@babel/preset-env']]
        }
    }
}

【讨论】：