截屏

什么是模块

一个完整的模块, 需要满足以下特性
独立性--能够独立完成某个功能, 隔离外部环境的影响
完整性--能够完成某个功能
可依赖--可以依赖其他模块
被依赖--可以被其他模块依赖
简而言之, 模块就是一个独立的空间, 能引用其他模块, 也能被其他模块引用

AMD-浏览器环境工作
CommonJS--nodejs环境工作
UMD--既可在浏览器工作, 也可在nodejs环境下工作

ES Module

开源库一般来说提供两个入口文件
index.js
index.esm.js

在webpack中, 可以通过配置mainFields来支持优先使用module字段, 只需要在webpack.config.js文件中添加
resolve: {
  mainFields: [‘module’, ‘main’]
}

rollup

rollup巧妙地通过将被依赖的模块放在依赖模块前面的方法来解决模块依赖问题

umd
module.exports = {
  input: 'index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'deepClone' // 全局变量名
  }
}

如果我们的库没有副作用, 则可以向package.json文件中添加sideEffects字段, 这样打包工具就能够使用tree-shaking功能进行优化了

兼容低版本浏览器

使用babel
pnpm add rollup-plugin-babel @babel/core @babel/preset-env

开源

一般的库建议选择MIT协议, 如果涉及专利技术, 则可以选择Apache协议

npm whoami
npm publish --access public
也可以通过publicConfig字段进行控制

npm 上忽略文件

可以创建.npmignore文件

在package.json中添加字段files: [‘/dist’]
使用npm pack --dry-run 命令可以查看哪些文件会被推送

tag

git tag 1.0.0
git push --tags

自定义数据

npm命令行为每个执行的命令都提供了pre和post钩子
在执行npm install 命令时, npm实际上会执行3条命令
npm run preinstall
npm run install
npm run postinstall
通过npm提供的postinstall钩子, 既可以实现自定义统计数据
{
  scripts: {
    “postinstall”: ‘node postinstall.js’
  }
}

如果使用了参数 --ignore-scripts 则会跳过执行postinstall钩子

github action

一个开源库可以用3个workflow
持续集成
发包
部署文档站

版本问题

假设有两个库A和C, 当这两个库都依赖同一个库, 但是以来的版本不一致时:
当主版本号一致, 次版本号不一致时, npm安装依赖时, 会自动选择次版本号更大的一个进行安装

使用npm安装一个库时, 默认会自动在版本号前面添加^

monorepo

yarn workspace 会将依赖安装到根目录, 这样各个项目就可以共享依赖
-A
-B
-C
-node_moudles

yarn workspace 修改了package.json
添加了 private: true, 避免根目录被发布到npm
workspaces: [‘project1’, ‘project2’]