私仓有两个模版,webpack模版用于组件库打包, rollup模版用于纯JS库
·于是如果是纯js库,无其他资源(vue, 图片等)可使用verdaccio-template-ru模版
·然而如果需要开发一个组件,可以使用verdaccio-template-wp 模版
使用流程(参考模版示例开发)
1.下载模版
2.修改package.json的name(开发包名), version(版本号)
3.在src文件夹开发,记得在src/index.js 导出开发的组件
4. npm publish 推送到私有仓库
注意事项
· webpack会对node_modules预先编译
用本地npm link联调时需要在项目中的 webpack的resolve 中 symlinks:false 可以解决
·开发包名(name):私包均以 “@xzfe/" 的前缀命名,配置文件中限制了该前缀名私包的权限
verdaccio-template-wp
主要用于打包组件类文件。
包括源码、构建工具
该模版使用的
es6 + less + ESLint
快速构建(预设配置)由于改了文件名,希望直接按照preset.json默认的来。不然可能会影响运行
1.进入@xzfe文件
2. vue create --preset ../verdaccio-wp-preset project-name
目录结构
- examples 测试组件目录
- lib 打包目录
- src 源文件
- public **
- vue.config.js vue配置文件
- .gitignore 忽略文件
script
npm run serve // 启动本地,在examples文件夹调试
npm run start // 当npm link时,实时更新联调
npm run lint // 目录格式化
npm run lib // 目录打包
使用流程(参考模版示例开发)
1.下载模版
2.修改package.json的name(开发包名), version(版本号)
3.在src文件夹开发,记得在src/index.js 导出开发的组件
4.可在examples引用组件测试
注意事项
webpack会对node_modules预先编译 用本地npm link联调时需要 webpack的resolve 中 symlinks:false 可以解决
版本记录
v1.0.0 完成项目构建 example测试目录, packages源代码, 样式 less
v1.1.0 由于本地调试时,包引入别的项目中会报eslint找不到模块错误
修改内容:
packages目录改为src目录,以便于目录结构清晰
删除prettier风格,统一用standard风格
统一用stylus预处理样式风格
添加发布前构建包,防止忘记构建
v1.1.1 添加npm run start(与本地项目联调时候,实时打包)
verdaccio-template-ru
私仓模板(
rollup打包,打包体积比webpack小,配置灵活,主要用于打包JS,缺点:不能打包资源文件。
目录结构
- build
- rollup.config.js 构建配置文件
- lib 打包文件
- src 源文件
- tsconfig.json ts配置文件
- .editorconfig 编辑器默认配置文件
- .gitignore 忽略文件
rollup 插件
· rollup-plugin-commonjs
· rollup-plugin-node-resolve
· rollup-plugin-typescript2
· rollup-plugin-uglify
script
npm run dev
npm run build
注意事项
webpack会对node_modules预先编译 用本地npm link联调时需要 webpack的resolve 中 symlinks:false 可以解决
版本记录
v1.0.0 完成项目构建 packages源代码
v1.1.0 修改源码目录,改为src