joyer-cli v1.4.8
集成开发环境 joyer-cli
遇到问题怎么办
Node版本
统一使用较新的LTS版本,推荐
v16.20.2 (LTS)(2023-08-10)
, 安装方式nvm- 原因:Node奇数版本为stable版本,偶数版本为LTS(Long Term Support)版本,后者维护期更长,更稳定
统一使用
npm
作为包管理工具,不使用yarn
使用文档
安装joyer-cli
npm install joyer-cli -g
使用joyer-cli
重要依赖及选择原因
webpack@4.43.0
- 目前为最新的稳定版本,相比3.x编译速度提升了近2倍,更好的代码分离机制,更多的模块类型支持,详见
- 使用其node api模式而非cli模式,目的在于有利于开发环境同时并存多个webpack版本,缺点是每个文件目录会比较大
- 疑问点,目前大部分项目应该是在3.x版本下构建,迁移成本?
webpack-dev-server@3.11.0
目前最新的稳定版本,适配webpack@4.x,v3.1.2之前的版本存在proxy的bug
@babel/preset-env@7.7.7
- 完美解决了babel-polifyll的问题,无需全量打包
@babel/core@7.7.7
- 适配@babel/preset-env@7.7.7
问题记录
joyer install <template>
原计划到source.jd.com
上面专门开一个repo用来存放和维护今后要用到的模板,但由于访问需要登录,故放弃- 替代方案:在joyer-cli项目中内置template目录,用于存放模板。缺点:可拓展性差,需要发版才能更新模板,耦合性较强。
- 后续考虑:可否把模板放到类似github的开源平台进行维护?
- 结论:在git.jd.com平台建立group作为模板仓库(joyer-template)和组件仓库(vue-components/zepto-components),通过gitlab api来抽取模板和组件
- 缺点:需要把自己的private token绑定到环境变量
JOYER_GIT_TOKEN
,这已经是目前能想到的最小成本的方案了,后续待讨论... - 更新:绑定了个人的具有时效的access_token,这样就无需使用者再绑定了 @2018-12-19
考虑实现类似
joyer upgrade
来更新组件库?- 开始考虑实现类似joyer-template的方式进行组件安装及更新,但维护成本较高且可能会有版本依赖问题
- 结论:和军哥讨论后决定使用模板集成组件的方式来维护组件库,把组件库内置到模版中指定的目录,通过
joyer install
命令来重新安装组件库
考虑替代通过检测
process.env
的方式来区分域名及环境,原因reading-environment-variables-is-slow-operation- 结论:joyer模板中joyer-config新增字段env,然后脚手架通过DefinePlugin设置编译时变量
抽离公共css的过程中发现了问题:
optimization.splitChunks.cacheGroups.{cacheGroups}.enforce: true
会产生一个空的js文件,目前还没有官方解决方案- splitChunks can create initial chunks that are empty after CSS extraction;
- extract multiple css files but created a unnecessary js file;
- 解决方案: 将common css模块作为entry引入,然后通过webpack-fix-style-only-entries组件删除空js文件
然后抽离css过程中发现新问题,在
scss
中使用@import
引入的common.scss
不会被抽离- 解决方案:编译完成后,将所有文件中引入的
common.scss
中的内容匹配并移除
- 解决方案:编译完成后,将所有文件中引入的
html-webpack-plugin和html-loader同时使用,会使html-webpack-plugin注入html变量失效
- 实现基于joyer-config的变量系统,在配置文件中添加env字段用来放置编译相关的变量
- 困难:webpack.DefinePlugin不能在html文件中定义变量
- 解决方案:实现webpack plugin用于替换html中指定字符
open-browser-webpack-plugin在windows子系统linux(Bash on Windows)中存在问题,不能打开浏览器
- 使用兼容性更好的opn代替
单页面应用使用history模式时,想利用HtmlWebpackPlugin输出多个index.html文件到各个路由目录,发现它不支持相对路径,导致路由目录下的index.html文件资源引用出错
- 目前已经合并代码但仍未发布
- 解决方案:
webpack-plugins/fix-html-webpack-plugin-relative-path.js
自行解决
2 months ago
4 months ago
5 months ago
4 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago