2

我有一个 Vue 应用程序，它应该可以在 ES5 浏览器（iOS 9）中运行。

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

我怎样才能停止这些箭头功能？

4

2 回答 2

0

如果您使用的是 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,
  },
}
于 2021-05-04T09:31:14.447 回答
0

尝试在 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']]
        }
    }
}
于 2021-06-02T06:18:26.970 回答