We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
本文将从以下几个方面分享如何搭建一个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 ⭐️
欢迎关注 我的掘金、我的知乎
The text was updated successfully, but these errors were encountered:
No branches or pull requests
如何搭建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 ⭐️
欢迎关注 我的掘金、我的知乎
The text was updated successfully, but these errors were encountered: