npm私仓打包环境搭建

1,197 阅读2分钟

私仓有两个模版,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