gulp使用babel与踩坑

babel 和 gulp 分别是什么作用就不多说。这主要讲的是在 gulp 中 使用 babel，以及有哪些常见问题。

使用

第一步安装

npm i -D gulp
npm i -D gulp-babel
npm i -D @babel/core
npm i -D @babel/preset-env

@babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。

@babel/preset-env 的作用是转化最新的JavaScript。

第二步配置

const {
  task,
  src,
  pipe,
  dest
} = require('gulp')
const uglify = require('gulp-uglify') // 压缩
const babel = require('gulp-babel')

// 打包兼容js
task('build:js', function (cb) {
  src('src/js/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist/js'));
  cb()
})

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [],
  "sourceType": "unambiguous"
}

上面这份配置是最简单的一份 babel 配置，一切也看着没有问题。但只基于你只使用新语法，而没有使用新 API。

这时候比如我在代码了使用 promise，或者更新的语法 async/await，在打包后你重新打开页面，你会在控制台发现一个错误 Uncaught ReferenceError: regeneratorRuntime。

分析🧐

原因分析：在程序中使用了 async/await ，经过@babel/preset-env 解析后会将代码转换为一个名为regeneratorRuntime的函数，但是转换后的代码仅仅存在这个函数的调用，并没有具体的定义体现。

踩坑

网上有很多方法都叫我们安装一个 @babel/plugin-transform-runtime 依赖，然后改 .babelrc 文件。

// 如
{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": true
      }
    ]
  ],
  "sourceType": "unambiguous"
}

然后重新打包运行，接着就会出现新的错误Uncaught ReferenceError: require is not defined，大致的意思就是 requeire未定义，我识别不了。

这个 @babel/plugin-transform-runtime 导致的，但是它的锅吗？不能这么说。

因为这种 CommonJS 模块，浏览器不识别，但如果你是使用 webpack 和 gulp 结合打包，使用这种方式就没有问题了。

npm i -D webpack
npm i -D webpack-stream

// gulpfile.js 伪代码
function scripts(cb) {
  const webpackConfigPath = path.join(process.cwd(), 'webpack.config.prod.js');
  const webpackConfig = require(webpackConfigPath);

  src('src/js/index.js')
    .pipe(gulpIf(webpackConfig, webpackStream(webpackConfig, webpack)))
    .pipe(dest('dest'));
  cb();
}

回来原来的问题，如果使用 单一 gulp 不能解决吗？（不添加 @babel/plugin-transform-runtime）

可以。

第一种方法，不使用新的 API。

第二种方法

安装 npm i -s @babel/profill，然后到 node_modules 目录下找到 polyfill.min.js ，然后通过 script 标签引入到页面就解决了。