npm 包 modern-package-boilerplate 使用教程

简介

modern-package-boilerplate 是一款用于构建现代化 JavaScript npm 包的工具，基于 Rollup.js 和 Babel，支持 ES6 和 CommonJS 模块规范。该工具的目标是提供基础的 npm 包开发架构，让开发者可以快速搭建出基于现代化 JavaScript 生态系统的 npm 包。

安装

安装 modern-package-boilerplate，我们需要使用 npm 或 yarn：

npm install modern-package-boilerplate --save-dev

yarn add modern-package-boilerplate --dev

使用

modern-package-boilerplate 基于 Rollup.js 构建，需要先在项目中安装 Rollup.js，使用以下指令：

npm install rollup --save-dev

yarn add rollup --dev

接下来，在项目的 package.json 文件中添加以下脚本：

{
  "scripts": {
    "build": "rollup -c"
  }
}

然后，在项目中创建一个 src 文件夹并编写你的代码。例如，创建一个 index.js 文件：

export function sum(a, b) {
  return a + b;
}

随后，在项目的根目录下创建一个 rollup.config.js 文件：

-- -------------------- ---- -------
------ --- ---- -----------------
------ - ------ - ---- -----------------------

------ ------- -
  ------ ---------------
  ------- -
    -
      ----- ---------
      ------- ------
      ---------- -----
    --
    -
      ----- -----------
      ------- -----
      ---------- -----
    --
    -
      ----- ------------
      ------- -------
      ----- ----------------
      ---------- -----
    --
  --
  -------- -----------
--

此文件定义了 Rollup 的输入和输出配置，以及使用 terser 压缩代码的插件。

最后，运行构建命令即可生成打包后的代码：

npm run build

现在，我们的代码就已经完成了构建过程，生成了 CommonJS、ES 和 IIFE 三种形式的输出，可以在不同的 JavaScript 环境中使用。

示例代码

我们在这里提供一个使用了 modern-package-boilerplate 的例子，用于理解如何使用 package.json 配置以及如何编写具体代码。

package.json

-- -------------------- ---- -------
-
  ------- -------------
  ---------- --------
  -------------- -- ------- ---- -------- ---- ------------
  ------- --------------------
  --------- -------------------
  ---------- --------------------------
  ---------- -
    -------- ------- ---
  --
  ----------- -
    -----------
  --
  --------- ----- ------
  ---------- ------
  ------------------ -
    ----------------------------- ---------
    --------- ---------
    ----------------------- --------
  -
-

src/utils.js

export function sum(a, b) {
  return a + b;
}

export function difference(a, b) {
  return a - b;
}

index.js

export { sum, difference } from './utils.js';

rollup.config.js

-- -------------------- ---- -------
------ --- ---- -----------------
------ - ------ - ---- -----------------------

------ ------- -
  ------ ---------------
  ------- -
    -
      ----- ---------
      ------- ------
      ---------- -----
    --
    -
      ----- -----------
      ------- -----
      ---------- -----
    --
    -
      ----- ------------
      ------- -------
      ----- ----------------
      ---------- -----
    --
  --
  -------- -----------
--

总结

现代化 JavaScript 生态系统已成为前端工程化的主流，npm 包作为其中不可或缺的一部分，也需要更加现代化的解决方案来构建。modern-package-boilerplate 基于 Rollup.js 和 Babel，提供了基础的 npm 包开发架构，帮助开发者快速搭建出符合现代化 JavaScript 生态系统的 npm 包。通过本文的简介和实例代码，相信读者已经可以快速上手运用该工具来开发自己的 npm 包。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdab