自建npm包-搭建,打包,调试,发布
时间:2022-07-25
本文章向大家介绍自建npm包-搭建,打包,调试,发布,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简介
这里总结一个简单的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地址。
相关文档
- hive计算日期差函数datediff,hive修改日期连接符
- 深度学习界的 “吃鸡挂”——目标检测 SSD 实验
- Hadoop查看所有JOB以及如何Kill指定用户的所有Job
- Java基础-23(01)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- ORA-01427问题的分析和解决(r6笔记第51天)
- 从编程实现角度学习 Faster R-CNN(附极简实现)
- Java基础-23(02)总结多线程,线程实现Runnable接口,线程名字获取和设置,线程控制,线程安全,同步线程
- 8 个最好的 Java RESTful 框架
- 【C++基础】C++11 lambda 表达式解析
- 大量redo生成的问题原因及改进(r6笔记第50天)
- Java基础-22总结登录注册IO版,数据操作流,内存操作流,打印流,标准输入输出流,
- YOLO,一种简易快捷的目标检测算法
- Java基础-22总结转换流,随机访问流,合并流,序列化流,Properties
- openshift镜像构建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法