函数内部获取函数名称,webpack配置非严格模式打包

网上文章很多,但是最终都未实现;

经个人实践,解决几个问题

一般的解决方案都是在.babelrc中增加plugins的处理,但我配置的无这个文件

直接在根目录新建.babelrc即可,有些工程将babel的配置写在package.json中,会报错有两个配置,删除package.json中的babel配置即可;如下

.babelrc内容,安装 "babel-plugin-transform-strict-mode": "^6.24.1",

在探索过程中我还安装过 "babel-plugin-transform-remove-strict-mode": "0.0.2",如果不行,尝试安装这个插件

{
    "plugins": [
        ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
      ]
  }

babel版本:     "@babel/core": "^7.10.4",wepack版本    "webpack": "4.30.0",

在build模式下,打包依然报错,在rules中增加babel的处理逻辑即可

module: {
    unknownContextCritical: false,
    rules: [{
        test: /\.scss$|\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },

      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
        exclude: [path.resolve("examples/static/svg")], // 去除你存放svg的那个文件夹,改用svgo-loader处理
      },

      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: [/node_modules/],

        options: {
          // plugins: ["babel-plugin-transform-remove-strict-mode"],
          presets: [
            [
              "@babel/preset-env", {
                targets: {
                  edge: "17",
                  firefox: "60",
                  chrome: "67",
                  safari: "11.1",
                  ie: "11"
                },
                useBuiltIns: 'usage'
              }
            ]
          ],

        }
      },
    ],
  },
  optimization: {

    minimize: true,
    minimizer: [
      new TerserJSPlugin({
        extractComments: false,
        parallel: true,
        cache: true,
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {
            // drop_console: true,
            collapse_vars: true,
            reduce_vars: true,
          },
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: {
            // 删除注释
            comments: false,
            beautify: false,
          },
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: true,
          safari10: false,
        },
      }),
    ],
  },

以上步骤在开发和build之后都不报错,但是build之后,执行时,函数内部无法拿到函数名称

执行该句 arguments.callee.name ,发现值为value

研究之后发现是由于build打包将所有函数的名称都移除掉了,处理的是TerserJSPlugin插件,因此在build配置中更改该配置即可,参见上述代码段

  keep_fnames: true, 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值