如何搭建一个js库的开发环境?

506 阅读1分钟

引言

随着前端的蓬勃发展,各种轮子,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 //发布当前的包

如果包名有冲突,会发布失败,可以换一个包名。如下就代表发布成功了:

image.png

接下来就可以使用了,因为打包了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.vuemain.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