用rollup 打包一个npm 库流程

最新推荐文章于 2024-08-22 14:21:56 发布

夜跑者

最新推荐文章于 2024-08-22 14:21:56 发布

阅读量1.9k

点赞数

分类专栏： npm 文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/liubangbo/article/details/121266417

版权

npm 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何从初始化、编写、打包到发布一个npm库的全过程，包括使用rollup进行模块打包，创建umd格式的库，并最终在新的Vue项目中验证库的使用。此外，还探讨了esmodule方式导入也能正常工作的问题。

摘要由CSDN通过智能技术生成

我们首先要在npm官网上注册一个账号，把打包好的库发布到npm官方仓库中。

接下来就制作npm库，步骤如下：

1）初始化

执行命令：npm init -y //-y 表示默认配置，不用一步一步去选择了

这时会生成一个package.json文件，内容大体如下（根据需要我们填写了一些内容）：

{
  "name": "zj-http-request",
  "version": "1.0.1",
  "description": "uni-app框架小程序网络请求接口库",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "copy": "cp package.json README dist"
  },
  "keywords": [
    "uni-app",
    "http",
    "request"
  ],
  "author": "智家商城",
  "license": "ISC",
  "devDependencies": {
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0"
  }
}

新建src/index.js文件并暴露一个简单接口：

function testFunc(){
	console.log("this is a test func")
}

export {
	testFunc
}

2）安装rollup，并新建一个配置文件

执行命令：npm i -D rollup rollup-plugin-node-resolve rollup-plugin-commonjs

在根目录下新建rollup.config.js 配置文件，内容如下：

import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: "src/index.js", // 打包入口
  output: [
    {
      file: "dist/index.js",
      format: "umd", // umd是兼容amd/cjs/iife的通用打包格式，适合浏览器
      name: "zjHttpRequest",
    },
  ],
  plugins: [
    // 打包插件
    resolve(), // 查找和打包node_modules中的第三方模块
    commonjs(), // 将 CommonJS 转换成 ES2015 模块供 Rollup 处理
  ],
};

至此我们库的代码结构大体如下：

3）rollup 进行打包

我们用rollup 命令行进行打包，执行命令：rollup -c rollup.config.js

打包成功后，dist目录下就生成了一个index.js 文件，cat index.js 内容如下：

从中看出打包出来的是umd格式的。

4）npm 发布

主要用到2个命令，先登录npm账号，如下：

npm login 按提示填上账号密码即可

成功后，我们到dist目录下，把跟目录下的package.json README拷贝到dist目录下再执行命令：npm publish 即可发布成功。

5）使用发布的库（zj-http-request）

验证一下刚才发布成功的npm 库。首先我们用vue-cli3 新建一个hello-world工程

命令如下：vue create hello-world，默认模板就可以。

在根目录下安装刚才创建的npm库 zj-http-request，命令如下：

npm i zj-http-request 安装成功后我们会在package.json中看到：

说明安装成功了。接下来我们使用这个库暴露出来的接口testFunc ，在main.js中添加如下代码：

import Vue from 'vue'
import App from './App.vue'

import {testFunc} from 'zj-http-request'
testFunc()
const zjHttpRequest = require('zj-http-request')
zjHttpRequest.testFunc()

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

成功的打印出两行：this is a test func

说明我们的库发布的没有问题。

不过我这里有个疑问，采用es module的方式导出暴露的testFunc 怎么也可以呀？我们打包的库明明是umd格式的。