简介
这里总结一个简单的npm包搭建，打包，调试，发布的基础点.
涉及内容
- npm初始化
- package.json 配置
- eslint配置
- babel配置
- rollup打包
包初始化
// 新建包目录
md my-pkg
// 进入包目录
cd my-pkg
// npm 初始化
npm init -y
package.json配置
{
name: 'my-pkg', // 包名
main: 'lib/index.js', // 包加载时的入口文件
version: 0.0.1, // 版本
description: '', // 描述
author: 'copy-left', // 作者
contributors: '...', // 其他贡献者
dependencies: {}, // 生产依赖
devDependencies: {}, // 开发依赖
repository：'', // 源码地址
keywords: ['test pkg', 'copy-left'], // 包搜索关键字
}
重点配置:
- name 包名，为了避免包名已被使用，可以提前在npm中搜索相关的名称字段， 看是否已被使用
- main 包引入地址, 当一个包被引入到项目中，被使用时，将通这个地址查找对应的入口文件.
- version 版本号， 每次提交包到npm时，需要保证当前包版本与已发布的包版本不同，但没有要求版本的具体格式。例如： 现在线上的包版本为 v1.1.1， 我本地包的版本设置为 v1.0.0, 不会影响我的发布。
eslint
一般我们希望整体的代码风格一致，在多人同时开发或添加新功能时，减少不必要的沟通成本，同时eslint也能帮助我们防止一些编写上的低级错误，例如：未声明变量， 重复引入等
安装
npm i -D eslint
创建配置文件 .eslintrc.[文件类型]
eslint 的配置方式可以通过package.json 或 独立的配置文件，具体参考eslint文档
touch .eslintrc.yml
文件配置
env: // 支持es6全局变量
es6: true
browser: true
extends: eslint:recommended // 使用eslint 默认规则
parserOptions:
ecmaVersion: 2019 // 支持es6语法校验
sourceType: module // 使用es6模块语法
rules: // 自定义规则配置
indent:
- error
- 2
babel
为了支持ES6语法，需要引入babel作为转换
安装
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
创建配置文件
touch .babelrc
文件配置
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": "2.6.10"
}
]
],
"plugins": [
["@babel/plugin-transform-runtime"]
],
"ignore": [
"node_modules/**"
]
}
rollup
因为我们使用了ES6，且希望包能在多个环境下运行。所以我们需要使用到打包工具
安装 rollup
npm i -D rollup
安装 rollup 插件
npm i -D rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel rollup-plugin-eslint
创建 rollup.config.js 配置文件
touch rollup.config.js
配置rollup
import resolve from 'rollup-plugin-node-resolve'; // 依赖引用插件
import commonjs from 'rollup-plugin-commonjs'; // commonjs模块转换插件
import babel from "rollup-plugin-babel"; // babel 插件
import { eslint } from 'rollup-plugin-eslint'; // eslint插件
export default {
input: './src/main.js', // 打包的入口文件
output:{
name: 'my-pkg', // 输入的包名
file: './bin/index.js', // 打包输出地址, 这里的导出地址就是package内main的地址
format: 'umd' // 包类型
},
plugins: [ // 使用的插件
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
}),
eslint({
throwOnError: true,
include: ['src/**'],
exclude: ['node_modules/**']
})
],
ignore: [
"node_modules/**" // 忽略目录
]
}
如果需要多文件合并到同一文件，可以使用相关的rollup插件包,
这里导出的配置也可以为配置数组，表示多个打包配置。可以同时处理多文件多输入的情况
添加打包命令
// package.json
{
....
"script": {
// 指定rollup运行的配置文件，并监听文件修改。
"dev": "rollup -c rollup.config.js -w",
"build": "rollup -c rollup.config.js",
}
// -c 执行配置文件
// -w 监听文件修改，当文件修改后将重新打包
}
编写源码
// 创建源码目录
md src
// 创建包入口文件
touch src/main.js
// 写入源码
// src/main.js
export function call(){
console.log('copy-left !!!')
}
打包
npm run build
调试
通过
npm link将本地包注册到全局。我们可以在其他包内引用我们自己的包.
这里我们在根目录下新建 test测试目录，模拟包的引入及使用
创建test目录
md test
touch test/index.js
全局注册包
// 在包根目录下 /pkg
npm link
引入本地包
// test 目录下
npm link my-pkg
编写调试
// /test/index.js
const myPkg = require('my-pkg')
myPkg.call()
因为这里直接使用node调用，所以node的包引入方式.
发布到npm
- npm官网注册npm账号
- npm login 登录npm
- npm publish 发布包
这里需要注意 npm的地址，当我们使用 cnpm， nrm等工具时。需要将当前的npm源地址切换回原来的npm地址。
网友评论