使用rollup打包工具包

wjp啊
307 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

一、需求

合作开发，新建的项目越来越多，总会有每个项目中都会用到的一些公共的方法，逻辑。比如混合app开发中，H5与原生交互的方法，项目成员在开发的过程中和原生配合新增了某个交互方法，但是没有及时更新技术文档，当另一个前端成员开发的时候，又碰到相同的交互需求，查找文档无果，需要多次沟通去确认。

  1. 为了不再重复性的去复制粘贴其他项目的代码；
  2. 为了方便后期的维护和更新；
  3. 为了方便团队的合作，提高开发效率；
二、方案

思路一：想到将这些方法，打包成npm包，前提是需要npm私服，可以使用verdaccio，看文档，一步步来就行，我只是本地搭了一下，测试使用，没有服务器资源的话，这个方法就只当作试验；
思路二：使用npm install 安装git仓库包，

npm package git URL formats
Git URLs used for npm packages can be formatted in the following ways:

  • git://github.com/user/project.git#commit-ish
  • git+ssh://user@hostname:project.git#commit-ish
  • git+http://user@hostname/project/blah.git#commit-ish
  • git+https://user@hostname/project/blah.git#commit-ish The commit-ish can be any tag, sha, or branch that can be supplied as an argument to git checkout. The default commit-ish is master

这个比较适合，公司私有项目间共享。使用tag来维护版本，每次安装最新依赖的时候，需要查看一下git tag，修改tag，再次执行 npm install 更新依赖；

01.png 关于这个包，有几点要求：

  1. 第一要满足可按需引入，打包的时候只打包使用到的方法，不影响使用该库的项目的打包体积；
  2. 第二要支持基于库中的核心方法，进行本地扩展；
  3. 第三要有测试用例，和使用说明；
  4. 第四要制定代码格式规范，提交规范，tag规范。
三、实施

选择了rollup 打包工具，是因为我只打包js文件（当然使用ts是最好了），不涉及css，img等其他类型文件，且配置简单，很容易上手，输出文件类型可选

-格式(format -f/--output.format)​

  • amd – 异步模块定义，用于像RequireJS这样的模块加载器
  • cjs – CommonJS，适用于 Node 和 Browserify/Webpack
  • esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过 <script type=module> 标签引入
  • iife – 一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
  • umd – 通用模块定义，以amd，cjs 和 iife 为一体
  • system - SystemJS 加载器格式

包的目录结构如下，核心代码在src目录下，打包的入口文件是 src/index.js ,打包使用的配置文件是rollup.config.js

image.png

配置文件，使用到了一些插件,关于插件的使用，一定是先有需求，再去找对应的工具

# rollup 打包相关知识点

1. npm i -D rollup
2. npm i -D rollup-plugin-json  
   
   功能： Convert `.json` files to ES6 modules:
   
3. npm i -D rollup-plugin-node-resolve  

   插件告诉 Rollup 如何查找外部模块

4. npm i -D rollup-plugin-commonjs 

   插件将 CommonJS 转换成 ES2015 模块的

5. npm i -D rollup-plugin-sourcemaps 

5. 导入 CommonJS (Importing CommonJS)

   Rollup 可以通过插件导入已存在的 CommonJS 模块

6. 默认使用 rollup.config.js

   rollup --config  指定使用自定义的配置文件

   这里使用 my.config.js 作为配置文件 ```rollup --config my.config.js```

7. external 接受一个模块名称的数组 或 一个接受模块名称的函数，如果它被视为外部引用（externals）则返回 true 。

image.png

package.json 文件，执行打包命令 npm run build

image.png

四、验证

可以使用 npm link 本地验证。

avatar
文章
阅读
粉丝