使用babel进行打包

概述

我们有很多打包工具,比如 webpack、rollup等等。但是如果我只想打包一个 js 文件呢?用他们会不会太重度了?其实完全没必要,只使用babel就可以打包了。

很多小型库都是这样打包的,比如:file-loadercss-loader

方法

先安装@babel/core@babel/cli,然后直接在package.jsonscripts里面添加下面内容就行了:

"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,
      },
    ],
  ],
};
上一篇:理解前端模块概念:CommonJs与ES6Module


下一篇:vue-cli lib模式打包umd分析