引言
随着前端的蓬勃发展,各种轮子,JS库层出不穷,现 NPM 已经有数以百万计的npm包提供开发者使用,那么你是否也想发布自己的npm包,提供自己或者是他人使用呢?
本章的内容将会带你如何搭建一个JS库的开发环境以及如何配合vite进行基于Vue环境的调试
搭建简易环境
最好先去NPM官网注册一个账号,注册完成后,开始搭建我们的开发环境
初始化package.json
:
$ npm init
新建liv文件夹,在lib下新建index.js文件:
├─ lib
│ └─ index.js
└─ package.json
接下来我们还需要引入打包的工具,选用vite
开发起来会轻松很多
//建议先全局安装vite
$ npm install -g vite
//安装完成后,测试是否成功安装
$ vite -v
vite/2.7.10
新建vite.config.js,在里面输入一下内容
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
entry: './lib/index.js', //库的入口
formats: ['es', 'umd'],
name: 'firstadd' //这里是你的包的名字,假设是firstadd
}
}
})
├─ src
│ └─ index.js
├─ package.json
└─ vite.config.js
修改package.json
字段,里面的firstadd
改成和你想取的包名:
{
"name": "firstadd",
"version": "1.0.0",
"description": "",
"main": "./dist/firstadd.umd.js",
"module": "./dist/firstadd.es.js",
"exports": {
".": {
"import": "./dist/firstadd.es.js",
"require": "./dist/firstadd.umd.js"
}
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"vite": "^2.7.10"
}
}
环境搭建完成了
发布第一个包
修改index.js
,在这里你导出的东西就是npm包的导入,例如写一个经典的加法包
function add(a, b) {
return a + b
}
export default add //默认导出
打包,因为已经全局安装了vite,所以直接在根目录下执行:
$ vite build
将会生成dist
文件夹,现在的目录结构:
├─ dist
│ ├─ firstadd.umd.js
│ └─ first.em.js
├─ src
│ └─ index.js
├─ package.json
└─ vite.config.js
打包完成下一步就是发布了,我们可以直接利用npm发布
npm login //确保自己登录了
npm publish //发布当前的包
如果包名有冲突,会发布失败,可以换一个包名。如下就代表发布成功了:
接下来就可以使用了,因为打包了esm和umd两种格式,所以我们可以通过两种方式使用
ESM:
$ npm install firstadd
import add from firstadd
console.log(add(3, 5))
UMD:
<body>
<!-- 利用免费cdn服务 -->
<script src="https://unpkg.com/firstadd"></script>
<!-- 或者 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/firstadd"></script> -->
<script>
console.log(add(3, 5))
</script>
</body>
更好的开发环境
如上的开发已经可以很好的测试js
代码,但是如果这个库和框架强关联,那么我还需要搭建框架的测试环境,下面以Vue
举例子:
修改打包配置
安装下面的开发插件,并修改vite.config.js
的配置:
npm instal @vitejs/plugin-vue rollup-plugin-terson vite vue@next
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { terser } from 'rollup-plugin-terser'
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: './lib/index.js',
formats: ['es', 'umd'],
name: 'firstadd'
},
rollupOptions: {
plugins: [
terser() //压缩代码的插件
]
}
}
})
新增开发目录
新增demo
文件夹,在下面添加App.vue
和main.js
两个文件
App.vue:
<template>
<div>
{{Add(1, 3)}}
</div>
</template>
<script setup>
import Add from '../lib/index.js'
</script>
main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
添加vite打包入口
vite
入口是从html
文件开始的,我们在根目录下之际新增一个index.html
文件
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app">
</div>
<script type="module" src="/demo/main.js"></script>
</body>
</html>
添加script脚本
package.json:
{
"name": "firstadd",
"version": "1.0.0",
"description": "",
"main": "./dist/firstadd.umd.js",
"module": "./dist/firstadd.es.js",
"exports": {
".": {
"import": "./dist/firstadd.es.js",
"require": "./dist/firstadd.umd.js"
}
},
"scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "serve": "vite preview"
},
"author": "",
"license": "MIT",
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.1",
"rollup-plugin-terser": "^7.0.2",
"vite": "^2.7.3",
"vue": "^3.2.26"
}
}
现在的结构:
├─ demo
│ ├─ App.vue
│ ├─ main.js
├─ dist
├─ src
│ └─ index.js
├─ index.html
├─ package.json
└─ vite.config.js
启动
$ npm run dev
访问 http://localhost:3000
,就可以编写Vue
的内容来测试库的效果,打包发布也是一样的
$ npm run build
最后
利用vite
打包开发速率将会得到极大的提升,想要测试其他环境也是类似的。配置vite
的插件既可,然后启动vite
的开发环境,这里我自己简单封装了一个脚手架帮助你快速搭建库的开发环境
安装和使用create-js-lib:
$ npm install -g @peterroe/create-js-lib
$ create-js-lib
? package name: test
please run :
cd test
yarn
yarn dev