关于使用 babel@7.x 的一点疑问

今天同事在打包项目代码时发现报错了,我跟踪了一下发现是之前踩过的坑,uglifyJS 在进行代码压缩时代码必须是 ES5,不能包含 ES6 的语法。所以我在写一个包时,最后都会用 babel 转一份 ES5 的代码,然后在上传到 npm,然而现在越来越多的第三方包的作者不这么去做了,有的人说自己的包是给 node 用的,没必要转,想在 browser 环境跑就自己配置转一下吧云云。 于是我就想着在 webpack 配置一下 exclude,将需要额外转换的包排除在 exclude 之外,这样应该就没问题了。然后试了一下发现并没有什么卵用,刚好周五,着急回家,然后今天闲下来的时候自己写了个例子试了一下。就发现了一个奇怪的点。Google 和 Github 上都没找到什么线索。 首先我安装了一个 shallow-clone@3.0.0 这个包,源码部分摘抄如下:

'use strict';

var valueOf = Symbol.prototype.valueOf;
const typeOf = require('kind-of');

第四行就有一个 ES6 的 const 语法了。然后我就配置了一下 .babelrc:

"@babel/env", {
  "targets": {
    "browsers": [ "ie >= 6" ]
  },
  "useBuiltIns": "usage"
}

这里就不用解释了,IE6 肯定不支持 const 了,然后 webpack 的配置我也简单的改了一下:

{
    test: /\.(js|jsx)$/,
    exclude: (input) => {
      if (input.indexOf('shallow-clone') !== -1 || input.indexOf('/src/') !== -1) {
        return false;
      }
      return true;
    },
    use: [{
      loader: 'babel-loader'
    }]
}

这里就是除了 shallow-clone 和 src 目录下的代码,其他的全部都 exclude 掉。然后我就开始 build 代码了,最后就发现生成的代码里面赫然有这样的东西:

var r=Symbol.prototype.valueOf;const o=n(139);

我就很郁闷了,我都已经配置了需要 babel 转换一下这个包,为啥还会有 const 语法。而且我清楚的记得以前的 uglifyJS 是没法压缩非 ES5 语法的 JS 的啊,难道是我现在用的新版本的原因,这个我一会儿再去看看,重点是为啥会有 ES6 的语法,然后我就开始到处找解释了。最后在 babel 的官网下找到了这么一句话:

  • You want to programmatically create the configuration?
  • You want to compile node_modules? // 你想要编译 node_modules?

babel.config.js is for you!

众所周知,babel 一般我们都会用 .babelrc 或者 babel.config.js 来配置它,我之前理解这两个东西的效果是一样的,而且我的配置一般都是静态的,所以我一直使用的都是 .babelrc。但是官网上这句话让我很郁闷,compile node_moudles 是啥意思,.babelrc 难道不能编译 node_modules 目录吗?我谷歌了一下,没有找到解释。 然后我决定用 babel.config.js 来试试看。 babel.config.js 和上面 .babelrc 同样的配置,结果如下:

var r=Symbol.prototype.valueOf,o=e(164);

看样子 const 被干掉了,所以 babel 官网文档诚不欺我。 继续寻找我的答案去了~~~

后续,刚刚使用了旧版本的 babel-loader 7.x | babel 6.x 试了一下,发现在 .babelrc 的情况下也是正常的。

转载于:https://my.oschina.net/u/3117745/blog/2980412

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值