通过 rollup 打包 js 代码 并发布 npm 包

如何使用 rollup 打包 js 代码 并发布 npm 包

1. 使用 npm 创建一个项目

新建一个目录，进入目录，执行 npm init。
按照命令行提示输入 包名、描述、入口、关键字 ...

2. 创建入口文件

目录下新建 main.js 文件

3. 编写 js 逻辑

// 编写加法：src/addition.js
// 使用 es6 语法，需要使用 babel 转为 es5
const addition = (a, b) => {
  return a + b;
}

export default addition;

// 编写减法：src/subtraction.js
function subtraction(a, b) {
  return a - b;
}

export default subtraction;

// 编写入口文件：main.js
import addition from "./src/addition";
import subtraction from "./src/subtraction";

export default {
  addition,
  subtraction,
}

4. 配置 rollup

在根目录下：

• 执行 npm install --save-dev rollup 安装 rollup 用于打包
• 执行 npm install --save-dev @rollup/plugin-babel 安装 @rollup/plugin-babel 用于和 babel 配合打包
• 在根目录下新建rollup的配置文件 rollup.config.js

  import babel from '@rollup/plugin-babel';
  
  export default { 
    input: 'main.js', // 入口文件
    output: [
      {
        file: './es/index.js',
        format: 'esm',  // 将软件包保存为 ES 模块文件
        name: 'cssModuleVue'
      },
      {
        file: './dist/index.js',
        format: 'cjs',  // CommonJS，适用于 Node 和 Browserify/Webpack
        name: 'cssModuleVue',
        exports: 'default'
      }
    ],
    watch: {  // 配置监听处理
      exclude: 'node_modules/**'
    },
    plugins: [
      // 使用插件 @rollup/plugin-babel
      babel({
        babelHelpers: 'bundled',
        exclude: 'node_modules/**'
      })
    ]
  };
  

tip: 具体配置可参考 rollup官网

5. 配置 babel

在根目录下：

• 执行 npm install @babel/preset-env --save-dev
• 创建文件 babel.config.json 配置babel

  {
    "presets": ["@babel/preset-env"]
  }
  

tip: 具体配置可参考 babel官网

6. 在 package.json 中添加 script 命令

{
  "scripts": {
    "build": "rollup -c",
    "serve": "rollup -c -w"  // 本地开发时，使用监听模式
  }
}

7. 关联远程仓库

将本地代码推送到 github 仓库

8. 发布 npm 包

• 注册 npm 账号，登录 npm官网，注册账号
• 确保当前源是官方源(npm set registry https://registry.npmjs.org/)，否则会发包失败。切换源可使用nrm工具，可参考文章 使用 nrm 管理 npm源；也可直接切换，可参考文章 切换npm源 -- 默认源、淘宝源
• 在终端中登录 npm账号。输入 npm login，依次输入用户名、密码、邮箱
  
• 在 package.json 中确认正确的版本号以及包名。终端输入 npm publish。发包完成，可登录 npm官网查看发布的包。tip: 如果包名使用 @开头，会被认为是私有包（需要注册组织），可使用 npm publish --access public 告诉 npm 这是个公共包。

#. 本地调试

• 在开发中的包：终端使用 npm link，并使用监听模式 npm run serve
• 在项目中引入：终端输入 npm link [包名]