Open HuJiaoHJ opened 5 years ago
本文将从以下几个方面分享如何搭建一个npm包,在搭建过程中需要注意的事项
在项目根目录下执行:npm init 创建 package.json 文件,这也是npm包的核心配置文件
npm init
package.json
package.json 中可以通过下面两个字段来指定入口文件:
这里,可以展开介绍一下 umd、commonjs、es module 模块类型的区别
<script>
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global['xxx'] = factory()); }(this, (function () { 'use strict'; ... })));
module.exports
require
export
import
而一般npm包都需要支持以上三种模块规范,以下列出通用的rollup配置:
import path from 'path'; import babel from 'rollup-plugin-babel'; import cleanup from 'rollup-plugin-cleanup'; import replace from 'rollup-plugin-replace'; import { uglify } from 'rollup-plugin-uglify'; import nodeResolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import pkg from './package.json'; const { version, name, author } = pkg; const banner = `/*! * ${name} v${version} * (c) ${new Date().getFullYear()} ${author} */`; const resolve = p => { return path.resolve(__dirname, p); } const pluginsCommon = [ commonjs({ // polyfill async/await 'node_modules/@babel/runtime/helpers/asyncToGenerator.js': ['default'] }), nodeResolve({ module: false, }), babel({ runtimeHelpers: true, }), ] export default [ { input: resolve('src/index.js'), plugins: pluginsCommon.concat([ cleanup(), ]), output: { file: resolve(`dist/npmpackage-name-${version}.js`), format: 'umd', name: 'npmpackage-name', banner, } }, { input: resolve('src/index.js'), plugins: pluginsCommon.concat([ uglify(), ]), output: { file: resolve(`dist/npmpackage-name-${version}.min.js`), format: 'umd', name: 'npmpackage-name', banner, } }, { input: resolve('src/index.js'), plugins: pluginsCommon.concat([ cleanup(), ]), output: [ { file: resolve(`dist/npmpackage-name.es.js`), format: 'es', banner, }, { file: resolve(`dist/npmpackage-name.js`), format: 'cjs', banner, } ] }, ];
再附上对应的babel配置:
{ "presets": [ ["@babel/preset-env", { "targets": { "browsers": ["Android >= 4", "iOS >= 8"] }, "modules": false, "loose": true }] ], "plugins": [ "@babel/plugin-external-helpers", [ "@babel/plugin-transform-runtime", { "regenerator": true } ] ] }
以上,配置则能构建出满足以上三种模块规范的文件
相应的package.json文件中,也需要通过不同的字段,来指定对应模块规范的入口文件,如下:
{ ... "main": "dist/npmpackage-name.js", "module": "dist/npmpackage-name.es.js", ... }
而dist/npmpackage-name-${version}.js的文件,则可以直接通过<script>标签引入
dist/npmpackage-name-${version}.js
注意:不要将入口文件指定为未过babel的文件,这往往会导致使用了此包的项目出现兼容问题
package.json中跟npm包依赖相关的字段主要有:
我们在开发npm包过程中,需要注意安装依赖的类型。
对于那些对版本有强要求的依赖,为了避免因依赖版本不一致导致问题,需要将此类依赖安装在 peerDependencies 中
一个npm包一般包括源文件、构建产出的文件、demo文件、测试文件等文件,而为了减小npm包大小,加快下载速度,发布时应该将无用的文件剔除掉,有两种方式:
files
.npmignore
每发布一个版本,版本号需要相应的升级(不要手动在package.json中维护)
应该通过npm version来对版本号进行管理,版本号有以下几种类型:
npm version
版本号管理策略如下:
而升级对应的版本号的命令则如下:
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
package.json配置如下:
{ "scripts": { "build": "rm -rf dist && rollup --config", "release_major": "npm version major", "release_minor": "npm version minor", "release_patch": "npm version patch", "postversion": "npm publish", "prepublishOnly": "npm run build" }, }
直接通过执行对应的release_命令来进行发布即可
release_
以上就是一个npm包通常会用到基本事项,后续会不断更新一些进阶的用法~
希望能对有需要的小伙伴有帮助~~~
喜欢我的文章的小伙伴可以点star ⭐️
欢迎关注 我的掘金、我的知乎
如何搭建npm包
本文将从以下几个方面分享如何搭建一个npm包,在搭建过程中需要注意的事项
初始化
在项目根目录下执行:
npm init
创建package.json
文件,这也是npm包的核心配置文件入口
package.json
中可以通过下面两个字段来指定入口文件:这里,可以展开介绍一下 umd、commonjs、es module 模块类型的区别
<script>
标签引入,写法如下:module.exports
定义模块对外输出的接口,使用require
加载模块export
、import
语法而一般npm包都需要支持以上三种模块规范,以下列出通用的rollup配置:
再附上对应的babel配置:
以上,配置则能构建出满足以上三种模块规范的文件
相应的
package.json
文件中,也需要通过不同的字段,来指定对应模块规范的入口文件,如下:而
dist/npmpackage-name-${version}.js
的文件,则可以直接通过<script>
标签引入注意:不要将入口文件指定为未过babel的文件,这往往会导致使用了此包的项目出现兼容问题
依赖
package.json
中跟npm包依赖相关的字段主要有:我们在开发npm包过程中,需要注意安装依赖的类型。
对于那些对版本有强要求的依赖,为了避免因依赖版本不一致导致问题,需要将此类依赖安装在 peerDependencies 中
文件
一个npm包一般包括源文件、构建产出的文件、demo文件、测试文件等文件,而为了减小npm包大小,加快下载速度,发布时应该将无用的文件剔除掉,有两种方式:
package.json
中的files
指定需要发布的文件.npmignore
文件中指定需要提出的文件版本号管理
每发布一个版本,版本号需要相应的升级(不要手动在package.json中维护)
应该通过
npm version
来对版本号进行管理,版本号有以下几种类型:版本号管理策略如下:
而升级对应的版本号的命令则如下:
发布自动化
package.json
配置如下:直接通过执行对应的
release_
命令来进行发布即可以上就是一个npm包通常会用到基本事项,后续会不断更新一些进阶的用法~
写在最后
希望能对有需要的小伙伴有帮助~~~
喜欢我的文章的小伙伴可以点star ⭐️
欢迎关注 我的掘金、我的知乎