关于使用 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