NPM 组件你应该知道的事

脑洞前端

共 3073字,需浏览 7分钟

 ·

2020-09-27 17:32

开发一个 npm 组件, 你是否了解需要对外导出什么格式的代码?如何让 npm 组件体积尽可能小?

整篇文章按照如下目录进行讲解:

  • 为何需要打包
  • 组件打包输出格式
  • 如何打包 esm 模式代码(感兴趣选读)
  • 减少组件打包体积的最佳实践

为何需要打包

首先,这里的打包概念解释一下, 只要有输出到新目录,就称为打包(免得大家对打包理解概念不一致)。

  • 一份代码,多种消费方式
  • 使用新特性语法,由于一般项目中,会默认不对 node_module 中的库进行编译以提高整个项目的编译速度,所以作为 npm 包,要转换成 es5 ,免得消费方吐槽……

打包格式

按照目前主流的模块系统来区分,可以先看一张图片宏观了解一下:

esm

如果是用 npm 组件来使用, 都推荐使用这种导出模式。

产生方式:
  • rollup 声明 target 为 esm 或者 babel 编译之后生成一个新的目录 (iceworks 的做法)
  • package.json 中声明 module,指向 esm
使用方式:
  • 浏览器通过