基于 vue 的 npm 包开发模板
-
在 packages 目录开发组件
-
生成组件库入口
npm run build:entry
- 登录 npm(如果登录过一次跳过),未注册的先注册
https://www.npmjs.com
npm login
登录成功后,登录信息会存放于全局,也就是说,下次更新发布组件,不需要再重新登录,可通过 npm whoami 可查看当前登录账号名。
- 发布
npm publish
- 项目依赖更新
npm update <name> --save
npm update <name> --save-dev
- 执行以下命令下载项目:
$ git clone https://github.com/HGthecode/vue-npm-template.git
- 安装依赖:
npm install
- 启动项目:
npm run serve
项目默认自带了 helloWorld,textComponent 两个示例组件,如不使用删除即可
目录/文件 | 说明 |
---|---|
examples | 组件示例,所有测试示例写在该文件夹下 |
|- App.vue | 示例入口页面 |
|- main.js | 示例入口文件 |
lib | 打包后的文件,执行 npm run lib 后生成 |
packages | 组件文件,在该文件夹下开发组件 |
|- helloWord | 示例组件 |
|- testComponent | 示例组件 |
index.js | 组件统一导出文件 |
public | 静态资源文件 |
.npmignoer | npm 发布配置文件 |
根据实际情况修改以下几个参数:
{
"name": "my-component",
"version": "1.0.1",
"private": false,
"main": "lib/init.js",
"keywords": [
"hg-components",
"test"
],
"author": {
"name": "HG",
"email": "376401263@qq.com"
}
}
参数 | 说明 |
---|---|
name | 组件名字,确保不会和别人的组件重名,可在 NPM 上测试搜索 |
version | 版本号,默认是 1.0.1 ,之后每次发布,都要修改版本号 |
private | 是否私有,设置为 false 才能发布 |
main | 入口文件,指向我们打包好的 js 文件,一般默认就行 |
keywords | 关键词 |
author | 作者信息 |
包名是 package.json 的 name 字段
执行以下命令,lib 用于混淆代码使用,将在 lib 生成 xxx.umd.min.js,根据生产环境需要使用,如果使用打包的文件,需要修改 package.json 的 main 指向
npm run lib
- 本地生成一个 包名-1.0.1.tgz 的包
npm pack
- 在另一个项目执行:
npm install 本地项目路径/包名-1.0.1.tgz
- 使用 vue-cli 脚手架新建项目,eslint、单元测试、router、vuex 等模块根据例子需要选择,若仓库仅作为组件库开发而无需开发例子页面的,可忽略任何选项。
此处选择 vue2.0 作为脚手架开发,因为 vue3.0 还未普及
-
修改 src 文件夹为 example,作为例子页面的开发目录
-
新增 packages 文件夹,作为组件库的开发目录
-
新增 .npmignore 文件,作为提交 npm 时忽略文件使用,内容可复制:
# 忽略目录
# packages/
examples/
public/
# other
bin/
dist/
node_modules/
node_modules/.bin/
.gitignore
.npmignore
package-lock.json
# 忽略指定文件
vue.config.js
babel.config.js
*.map
.browserslistrc
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
- 修改 .npmignore 内容,提交 git 时可忽略的文件
# 忽略目录
# packages/
examples/
public/
# other
bin/
dist/
node_modules/
node_modules/.bin/
.gitignore
.npmignore
package-lock.json
# 忽略指定文件
vue.config.js
babel.config.js
*.map
.browserslistrc
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
-
新增 CHANGELOG.md ,作为每次发布时记录更改项
-
新增 vue.config.js 文件,修改 webpack 配置项
module.exports = {
// 修改 src 为 examples
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html",
},
},
// 组件样式内联
css: {
extract: false,
},
// 扩展 webpack 配置,使 packages 加入编译
chainWebpack: (config) => {
config.module
.rule("js")
.include.add("/packages/*")
.end()
.use("babel")
.loader("babel-loader")
.tap((options) => {
// 修改它的选项...
return options;
});
},
};
- 在 package.json 新增执行命令
"scripts": {
"build:entry": "node bin/build-entry.js",
"lib": "vue-cli-service build --target lib --name ys-weex-ui --dest lib ./index.js",
...
},
-
在 package.json 里,修改依赖位置,将 dependencies 的全部依赖复制粘贴到 devDependencies,可避免安装此仓库时 node_modules 文件杂乱。
-
新增组件库入口文件生成代码,bin/build-entry.js,内容如下:
const uppercamelize = require("uppercamelcase");
const fs = require("fs");
const path = require("path");
function indexEntry() {
const tips = `/**
* CopyRight (C) 2021-2024.
* Created by chilson on 21/02/18
*/
`;
const Components = fs
.readdirSync(path.resolve(__dirname, "../packages"))
.filter((_) => _ !== "sth you dont want to import");
const importList = Components.map(
(name) => `import ${uppercamelize(name)} from './packages/${name}';`
);
const exportList = Components.map((name) => `${uppercamelize(name)}`);
const content = `${tips}
${importList.join("\n")}
export {
${exportList.join(",\n ")}
};
`;
fs.writeFileSync(path.join(__dirname, "../index.js"), content);
}
indexEntry();