使用babel進行打包

概述

我們有很多打包工具，比如 webpack、rollup等等。但是如果我只想打包一個 js 文件呢？用他們會不會太重度了？其實完全沒必要，只使用babel就可以打包了。

很多小型庫都是這樣打包的，比如：file-loader，css-loader

方法

先安裝@babel/core和@babel/cli，然后直接在package.json的scripts里面添加下面內容就行了：

"build": "babel src -d dist --copy-files"

注意：這里的 --copy-files 表示對於那些 babel 處理不了的文件（比如md、png文件等），直接把它們復制到目標文件夾。

實例

比如我有一段代碼:

// loader.js
import { getOptions } from 'loader-utils';

export default function loader(source) {
  const options = getOptions(this);

  source = source.replace(/\[name\]/g, options.name);

  return `export default ${ JSON.stringify(source) }`;
}

打包后就變成了：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = loader;

var _loaderUtils = require("loader-utils");

function loader(source) {
  const options = (0, _loaderUtils.getOptions)(this);
  source = source.replace(/\[name\]/g, options.name);
  return `export default ${JSON.stringify(source)}`;
}

很顯然，ES Module 被打包成了 ejs，並且加了一個__esModule: true屬性，和我們預想的一樣。

保留 module

上面打包時的 babel 配置是：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: "current"
        }
      },
    ],
  ],
};

如果要保留 module，則配置如下：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: "current"
        },
        modules: false,
      },
    ],
  ],
};