当前位置: 欣欣网 > 码农

如何使用Rollup开发一个npm包并发布

2024-05-09码农

冲~

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。

背景

前几天老大说现在团队中很多冗余代码,而其中一部分就表现在,很多项目都重复写了一些一模一样的工具函数,比如:

  • 公司内部加密函数

  • 公司内部的权限校验函数

  • 公司内部的单点登录封装函数

  • 等等。。。。

  • 其实这些函数在每一个项目中都是一模一样的,没必要每一个项目都写一遍,这种做法有很多坏处

  • 代码冗余

  • 不好维护,函数一改,就所有项目都需要一起改

  • 由于我们公司项目不是采用 Monorepo 的方式去管理的,所以现阶段比较好的办法就是写一个工具库包,发布到私有 npm 仓库上,然后在每一个项目中去安装使用即可~ 这样好处有

  • 减少了每个项目中的代码冗余

  • 好维护,逻辑只需要改一处,然后改版本号重新发包即可

  • 类比

    在日常的开发中,我们会使用到很多很多的包,比如我们想要使用 lodash 只需要在终端里输入

    npm i lodash -D

    然后我们就会在 node_modules 中看到这个包,并且可以去使用它~

    import { cloneDeep } from'lodash'
    const obj1 = {};
    const obj2 = cloneDeep(obj1)

    这些包长啥样?

    我们打开 node_modules 中的 lodash 发现,里面其实都是打包后的产物,也就是开发 lodash 的开发者,编写一些例如 ts、ES6 语法的代码后,进行 打包后 发布到 npm 上,我们才可以通过 npm i lodash 去安装它~

    那为啥要 打包后 才发布到 npm 上呢?这是因为

  • 需要把 ts、ES6 这些比较新语法转换成 ES5 的旧语法

  • 需要对代码进行压缩后再发布,这样体积会比较小一些

  • Webpack or Rollup?

    大部分的前端开发者接触到的打包工具都是 Webpack ,而很少接触到 Rollup ,我可以给大家简单讲讲这两者有什么区别~

    Webpack

    Webpack 主要用于构建复杂的前端项目。他能做以下这些事情:

  • 支持将多种资源(如JavaScript、CSS、图片等)视为模块,并通过模块依赖关系进行打包

  • 提供了丰富的插件和加载器,能够处理各种复杂的场景,如代码分割、懒加载、热模块替换等

  • 它还支持开发环境和生产环境的不同配置,使得项目开发和部署更加方便

  • 由于 Webpack 的灵活性和丰富的功能,它适用于大型、复杂的项目,特别是那些包含大量模块和资源、有复杂构建需求的项目

    Rollup

    Rollup 是一个面向现代JavaScript应用的模块打包工具,专注于创建用于库和类似库的打包。具备以下这些特点:

  • 采用ES模块作为标准,可以按需引入和打包代码,并且能够进行 Tree Shaking ,去除未使用的代码,减小输出文件大小

  • 相对于 Webpack Rollup 更加轻量级和简单,它不提供像Webpack那样丰富的插件和加载器生态系统,但它的输出更精简

  • 小结

  • Webpack 适合用在项目中

  • Rollup 适用于开发一些工具库、组件库

  • 所以我们开发工具库是推荐使用 Rollup 来开发

    开发自己的工具库

    初始项目

    首先新建一个 npm-sx-test 的文件夹,用来开发我们的工具库

    名字可以自己定~

    然后进入到 npm-sx-test 中,运行

    npm init

    初始化一个 npm 的环境~


    name'npm-sx-test'// 包名 
    main'index.js'// 包被引入时的入口文件 
    type"module"// 代码可以使用 ES6 模块化
    version1.0.0// 版本 
    description''// 描述 
    author'zh'// 作者 
    contributors''// 其他贡献者 
    dependencies: {}, // 生产依赖 
    devDependencies: {}, // 开发依赖 
    repository:''// 源码地址 
    keywords: [], // 包搜索关键字 
     }

    接着在根目录下,创建一个入口文件 index.js 以及一个 utils 文件夹

  • index.js 用来统一导出所有工具函数

  • utils 用来存放各种工具函数

  • // permission.js
    exportconst checkPermission = (role) => {
    // coding...
    return role
    }
    // crypto.js
    exportconst crypto = (password) => {
    // coding...
    return password
    }
    // sso.js
    exportconst sso = (username) => {
    // coding...
    return username
    }
    // index.js
    import { crypto } from'./utils/crypto'
    import { checkPermission } from'./utils/permission'
    import { sso } from'./utils/sso'
    exportdefault {
    crypto,
    checkPermission,
    sso
    }

    配置 Rollup & Babel 打包环境

    代码写完后,我们需要将他们打包,还记得我们上面说了为啥要打包后再发布?

  • 1、需要把 ts、ES6 这些比较新语法转换成 ES5 的旧语法

  • 2、需要对代码进行压缩后再发布,这样体积会比较小一些

  • 我们需要先安装这些必要的插件

    npm i @babel/preset-env
    @rollup/plugin-babel
    rollup

    接着创建一个 rollup.config.js 用来存放 Rollup 打包的配置

    // rollup.config.js
    import babel from'@rollup/plugin-babel';
    exportdefault { 
    input'index.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/**'
    })
    ]
    };

    然后新建一个 babel.config.js 用来配置 Babel ,它可以帮我们把一些高级语法转成低级语法

    // babel.config.js
    {
    "presets": [
    [
    "@babel/preset-env",
    {
    "modules"false
    }
    ]
    ]
    }

    配置打包命令

    现在我们可以配置打包命令了,在 package.json 中,配置命令

    "scripts": {
    "build""rollup -c",
    "serve""rollup -c -w"
    }

  • -c :代表读取配置去打包,默认读取根目录下的 babel.config.js

  • -w :代表了 watch 监听,调试的时候可以用~

  • 运行 npm run build 之后,我们可以看到打包成两个版本

  • dist:产物是 Commonjs 模块化

  • es:产物是 ES6 模块化

  • 发布 NPM 包

    首先我们需要把 NPM 的源设置成你想要的,一般都是设置为公司的私有仓库地址,但是这里我设置为公共仓库~

    npm config set registry https://registry.npmjs.org/

    接着我们需要登录 NPM ,进行身份认证~

    npm login

    需要填写这些信息

  • username:npm 的用户名

  • password:npm 的密码

  • email:npm 注册的邮箱

  • one-time password:邮箱接收的验证码

  • 最后修改一下 package.json

    加上 "main""dist/index.js", 加上 "module": "es/index.js"
    加上 "files": [
    "es/*",
    "dist/*"
    ],

  • 修改 main 是为了我们使用这个包时引用到 dist 里的文件

  • 修改 files 是为了推送 npm 只推送所需要的文件上去就行

  • 然后运行 npm publish ,就会将打包后的产物推送到 npm 上了~

    使用函数库

    现在回到各个项目中,只需要

    npm i npm-sx-test

    就可以使用我们自己的组件库啦~

    import { checkPermission } from'npm-sx-test'
    console.log(checkPermission('admin'))

    结语

    我是林三心

  • 一个待过 小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司 的作死型前端选手;

  • 一个偏前端的全干工程师;

  • 一个不正经的掘金作者;

  • 逗比的B站up主;

  • 不帅的小红书博主;

  • 喜欢打铁的篮球菜鸟;

  • 喜欢历史的乏味少年;

  • 喜欢rap的五音不全弱鸡

  • 如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 -->

    广州的兄弟可以约饭哦,或者约球~我负责打铁,你负责进球,谢谢~