介绍几种打包构建 js 库的方式

写在前面

现在编写前端应用，大大小小的项目为了复用或者是快速开发都会引入或多或少的 js 库。那么有很多时候也需要我们自己维护一套东西，方便在内部多项目之间复用。 那么对于构建 js 库的方式势必要有所了解或者是熟练使用。

1、传统方式

传统方式要想构建一个 js 库，那么无非你需要提供一个全局变量，并且在这个变量上挂载一些属性或者方法。这种方式无需借助其他工具，纯粹是硬编码，相对来说功能比较简单单一。 最简单的方式就是通过自执行函数形成一个沙箱模式，来编写库代码，并且对外暴露

(function (win) {
  function say() {}
  win.mylib = {
    say,
  };
})(window);

当我们需要复用的东西越来越多，甚至是本身库不满足我们的时候，需要对库文件进行拆分、相互引用、甚至依赖第三方库，然后最终又将这些模块合并到一起方便我们统一导入使用。有时候 也有可能我们需要开源提供给其他开发者一起使用维护等。到了这个程度，势必是需要借助一些构建工具来帮我们完成库的相互依赖，打包优化等工作。社区最具代表性的就是webpack、rollup、vite. 其实我们不需要太过关心哪个工具好坏，因为只要能满足需求，在我看来就是好东西。

2、使用 webpack 构建库

• 安装依赖

npm i webpack webpack-cli

• src/string/index.js 这是一个跟字符串相关的插件代码

export function test(str, num) {
  return str.length > num ? str.slice(0, num) + "..." : str;
}

• src/index.js 这是库的一个入口文件，负责将各种模块统一导出

export { test } from "./string/index.js";

• webpack.config.js

const path = require("path");
module.exports = {
  mode: "production",
  entry: `./src/index.js`,
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "mylib.min.js", // 指定生成的库文件名称
    library: {
      type: "umd", // 指定打包出来的库 是哪种模块化规范 通常我们采用umd 就能满足 CommonJS、AMD 以及 script 标签使用
      name: "mylib", // 这就是我们导出的全局对象上的属性的名称 例如 window.mylib  上面有一个test方法
    },
  },
  externals: {
    // 排除一些模块，让用户自己去安装需要的模块，这样能有效减少包的体积
    lodash: {
      commonjs: "lodash",
      commonjs2: "lodash",
      amd: "lodash",
      root: "_", // 页面引入的全局变量
    },
  },
};

• 执行打包

npx webpack --config webpack.config.js

3、使用 rollup 构建库

rollup 作为专注 js 库打包的一个工具，在打包 js 库方面具备很大优势。通常来讲也需要我们对其做一些简单配置来打包 js 代码,库代码不用动，我们仅仅是换了个打包工具而已

• 安装依赖

npm i rollup  @rollup/plugin-babel @rollup/plugin-terser -D

• rollup.config.js

import babel from "@rollup/plugin-babel";

import terser from "@rollup/plugin-terser";

export default [
  {
    input: "./src/index.js",
    plugins: [
      babel({
        babelHelpers: "bundled",
      }),
    ],
    output: {
      file: `./dist/mylib.js`,
      format: "umd",
      name: "mylib",
      sourcemap: false,
    },
  },
  {
    input: "./src/index.js",
    plugins: [
      babel({
        babelHelpers: "bundled",
      }),
      terser(),
    ],
    output: {
      file: `./dist/mylib.min.js`,
      format: "umd",
      name: "mylib",
      sourcemap: true,
    },
  },
  {
    input: `./src/index.js`,
    plugins: [
      babel({
        babelHelpers: "bundled",
      }),
    ],
    output: {
      file: `./dist/mylib.es.js`,
      format: "es",
      name: "mylib",
      sourcemap: false,
    },
  },
];

• 执行打包

npx rollup -c rollup.config.js

4、使用 vite 构建库

前面两种打包工具其实还是需要对工具本身有一定了解的，特别是webpack,由于配置复杂，让很多人都望而却步。那么总有那么一些大佬会对一些底层的打包工具做进一步封装，方便使用，vite就是如此。 要使用vite首先要安装vite

• 安装依赖

npm i vite -D

• vite.config.js

import { defineConfig } from "vite";
export default defineConfig({
  build: {
    lib: {
      entry: {
        myLib: "./src/index.js",
      },
      name: "myLib",
      fileName: (ModuleFormat, entryName) => {
        return entryName + "." + ModuleFormat + ".js";
      },
      formats: ["es", "cjs", "umd"],
    },
  },
});

• 执行打包

npx vite build

最后

至此，三种 js 库打包的方式都简单的介绍了一下，其实这中间涉及到的包括模块化和打包工具的使用以及包含 npm 发包等方面的东西还挺多，但是这里都不是重点，重点是如何打包出我们的产物。 关于源码部分你仅仅需要把src/index.js和src/string/index.js拿过去改改一葫芦画瓢，然后打包方式自行拿一种过去使用即可,至于发包和其它周边知识可以自行百度一下。发包部分可以参考： docs.npmjs.com/packages-an…