如何在 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.jsmodule.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 中添加插件.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']]

        }

    }

}

Answer 2

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

output: {

  // ... other configs

  environment: {

    arrowFunction: false,

    bigIntLiteral: false,

    const: false,

    destructuring: false,

    dynamicImport: false,

    forOf: false,

    module: false,

  },

}