如何在 vue 文件中转译箭头函数？

Question

我有一个Vue应用程序，它应该在ES5浏览器（iOS 9）中工作。

Vue组件中的一些函数被转换为Arrow函数：这会破坏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;

        }

和 函数被转译为箭头函数，但不是函数。datadataPrivacyLinkisOverFifTeen

以下是它的外观：

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"

  ]

如何停止这些箭头功能？

Answer 1

尝试在 babel.config 中添加插件.jsmodule.exports = {&nbsp; &nbsp; presets: [['@babel/preset-env', { modules: false }]],&nbsp; &nbsp; plugins: [&nbsp; &nbsp; &nbsp; '@babel/plugin-syntax-dynamic-import',&nbsp; &nbsp; &nbsp; '@babel/plugin-transform-arrow-functions' // add this&nbsp; &nbsp; ],&nbsp; &nbsp; env: {&nbsp; &nbsp; &nbsp; &nbsp; test: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; presets: [['@babel/preset-env']]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

Answer 2

如果您使用的是 Webpack 5，则需要在配置中指定要转译的功能部件，如下所述：https://webpack.js.org/configuration/output/#outputenvironment。ouput.environmentoutput: {&nbsp; // ... other configs&nbsp; environment: {&nbsp; &nbsp; arrowFunction: false,&nbsp; &nbsp; bigIntLiteral: false,&nbsp; &nbsp; const: false,&nbsp; &nbsp; destructuring: false,&nbsp; &nbsp; dynamicImport: false,&nbsp; &nbsp; forOf: false,&nbsp; &nbsp; module: false,&nbsp; },}