laoriy cli service
npm install @laoriy/cli-servicev1.0.0+
v1.1.0+
js
// 注意,这里只是介绍说明,实际已在模板中自动添加了打包工具,无需手动添加
// install
npm i @laoriy/cli-service -D
// 启动本地开发服务
laoriy-cli-service dev
// 打包生成非压缩文件
laoriy-cli-service build:dev
// 打包生成压缩文件
laoriy-cli-service build:prod
// copy src目录源文件
laoriy-cli-service build:src
// 发布打包,实际是各个打包命令的集合
laoriy-cli-service build
`
$3
> 基本的webpack配置项(链接),内部会进行merge;如下列举是已测试可正常使用的。
- externals
> 扩展配置项
- css.extract
Type: boolean
Default: true
是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。false时,会将css中的静态资源转换为base64格式,增加包的体积,所以对于vue组件中css样式中引用本地静态文件很少(字体,图片等)的情况下。可以设置为false,便于使用。
$3
- 1、目前打包处理只对es6+的语法(如var,const)做了babel编译,如果库里面有用到新的api(如Array.prototype.includes)
,需在工程化项目中配置语法转换处理,如vue项目vue.config.js中配置:
`js
transpileDependencies: ['laoriy-lib'],
`
- 2、插件间相互引用,按需引入插件后重复代码的处理问题
- 3、只做了打包js库的测试,vue组件库的待完善更新
$3
> 使用npm link方式
`
// 调试
cd 当前项目根目录(如,cd /AIOT_laoriy-npm-libs/laoriy-cli/cli-service)
npm link
cd 当前插件项目根目录(如,cd /Users/projects/test-lib)
laoriy-cli-service dev
// ...
laoriy-cli-service build
// 调试完毕
npm unlink
`
$3
- 输入
1. 构建入口为根目录index.ts,不建议更改
2. 本地开发调试入口examples/index.ts,模板为examples/index.html,不建议更改
- 输出
1. 打包后的js文件名根据scr/package.json的main字段配置,其中lib设置为xx.js,vue组件设置为dist/xx.js(默认是设置好的,只需要改个自己的名字)。
2. lib输出在根目录结构如下:
`js
| -- dist
| -- src src目录源代码
| -- types ts声明
| -- utils 按需引入打包处理的各个分包
| -- a.js
| -- b.js
| -- package.json lib库对应包的package.json说明文件
| -- xx.js 打包产物
| -- xx.min.js 打包产物
`
3. vue组件输出在根目录结构如下:
`js
| -- dist
| -- dist
| -- styles
| -- index.css 打包后的css产物
| -- xx.js 打包产物
| -- xx.min.js 打包产物
| -- src src目录源代码
| -- types ts声明
| -- package.json lib库对应包的package.json说明文件
``