一、初始化项目
npm create vite
选择模板：
- 开发方法库：选择第一个Vanilla模板就可以了
-
开发组件库：如果想开发基于vue的组件库可直接选择Vue模板
二、封装方法或组件并添加打包配置
2.1 封装方法库
-
在根目录下新建src文件夹，并新建一个js文件写入想要封装的方法：
-
在main.js中引入引入封装方法的js文件，并导出封装的方法:
- 配置package.json
{
"name": "my-function-lib", // 包名，命名前可以先去npm官网中查看是否已有这个包名，如果已经有的话就发布不了
"private": false, // 是否为私有包，false则表示公开包
"version": "0.0.1", // 版本号，之后如果要更新，必须加大才能发布
"type": "module", // 指定项目的模块类型为模块
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
// 指定发布的文件夹
"files": [
"dist"
],
"main": "dist/my-function-lib.cjs", // 指定项目的主入口文件（CommonJS）
"module": "dist/my-function-lib.js", // 指定项目的模块入口文件（ES Module）
"devDependencies": {
"vite": "^5.4.8"
}
}
- 创建vite.config.js，并加入配置
import { defineConfig } from 'vite'
export default defineConfig({
build: {
outDir: 'dist', // 构建输出目录设置为'dist'
target: 'es2020', // 构建目标设置为'es2020'
lib: {
entry: 'main.js', // 设置库的入口文件
formats: ['es', 'cjs'], // 定义导出格式 包含 'es' 模块格式，适用于 ES6 及以上版本，包含 'cjs' 模块格式，适用于 CommonJS 规范
name: ''
},
},
})
2.2 封装组件库
-
在src文件夹新建package文件夹，并创建.vue文件写入想要封装的代码:
-
在package新建js文件，引入封装的组件
import MyButton from './my-button/index.vue' // 导入自定义的Vue组件
import './index.css' // 导入CSS样式文件，为应用添加全局样式
// 定义一个安装函数，用于将BtnTab组件注册到Vue应用中
const install = (app) => {
// 将BtnTab组件注册为全局组件，使得在应用的任何地方都可以使用这个组件
app.component('MyButton', MyButton)
}
// 默认导出一个对象，包含install方法，允许外部通过'default'关键字导入并安装BtnTab组件
export default {
install,
}
// 单独导出BtnTab组件，允许外部按需导入
export { BtnTab }
- 配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
outDir: 'dist',
lib: {
entry: 'src/package/index.js', // 入口文件路径
name: 'my-components-package', // 组件库的名称
fileName: 'my-components-package', // 打包后的文件名
},
rollupOptions: {
// 处理不想打包的依赖
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
})
- 运行npm run build命令打包
- 配置package.json
{
"name": "my-components-package",
"private": false,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
// 指定包含的文件或文件夹
"files": [
"dist"
],
"main": "dist/my-components-package.umd.cjs",
"module": "dist/my-components-package.js",
"exports": {
".": {
"import": "./dist/my-components-package.js", // import导入模块时的入口文件
"require": "./dist/my-components-package.umd.cjs" // require方式引入模块时的入口文件
}
},
"dependencies": {
"vue": "^3.4.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
"vite": "^5.4.1"
}
}
- 编写README.md文件。
三、发布到npm
3.1 登录npm
在终端输入npm login ,在登录前一定要将npm源设置为官方源，否则登录会报错
// 官方镜像源
npm config set registry https://registry.npmjs.org/
// 淘宝镜像源
npm config set registry https://registry.npmmirror.com/
检查当前npm源：
npm config get registry
3.2 发布包
在终端输入npm publish （这个命令也需要npm源为官方源）
发布成功后登录npm官网，在自己的账号上packages中就能看到自己发布的包了。
要点
main和module字段的意义
1. main:
main字段指定了包的入口点，即其他程序要引用该包时使用的主文件。
传统上，main字段指向一个CommonJS模块（使用require()引入）。
大多数Node.js应用和传统浏览器环境使用main字段引入包。
2. module:
module字段指定了一个ES6模块（使用import/export语法）作为包的入口点。
现代浏览器和一些Javascript打包工具（如Webpack、Rollup）能够识别并使用module字段来加载ES6模块。
使用ES6模块语法可以获得更好的静态分析和tree-shaking性能。
总的来说：
main是为了支持CommonJS模块的传统方式，module则是为了支持ES6模块的现代方式
当包同时提供CommonJS和ES6模块时，通常会同时设置main和module字段。这样可以让应用根据自身的打包工具和模块系统来选择合适的入口点。
总结
npm 包其实就是一个组件或者方法或文件，使用npm的发布命令publish，其实本质上就是把这些上传到npm仓库进行统一化管理，当你在开发项目的过程中，你可以根据自己的需求把相应的包拉取到你的项目中进行使用；
网友评论