集成开发环境 joyer-cli

遇到问题怎么办

• 到 这里 搜索问题、提交问题
• 常见问题及常用用法
• 模板库
• 跨模板通用组件库
• 详细文档
  • 1.4.8(current)

Node版本

• 统一使用较新的LTS版本，推荐 v16.20.2 (LTS)(2023-08-10), 安装方式nvm

  • 原因：Node奇数版本为stable版本，偶数版本为LTS(Long Term Support)版本，后者维护期更长，更稳定

• 统一使用npm作为包管理工具，不使用yarn

  • 原因：npm从5.x版本以后已经加入yarn的大部分特性，包括package-lock.json、默认--save、cache重写带来的安装速度提升(不输yarn)等，详见
  • 交叉使用npm和yarn会产生功能类似的重复文件及一些未知风险，使用比例

使用文档

安装joyer-cli

• npm install joyer-cli -g

使用joyer-cli

• 文档：

  模板贡献规则

  组件贡献规则

  joyer-config 配置说明

  joyer init 创建新项目

  joyer dev 启动本地编译环境

  joyer build 打包项目

  joyer deploy 上传测试环境

  joyer install 安装组件

  joyer link 创建组件软链

  joyer add 创建新页面

  joyer serve 启动本地静态资源服务器

  joyer mock 启动 mock 服务

  joyer cure 将全局 joyer 环境固化到项目目录

  joyer jue 动态化三端相关命令

  joyer login 用户登录

  joyer whoami 检查当前登录用户

  joyer create 创建模板/组件

  joyer clear 上传测试环境

重要依赖及选择原因

• [email protected]

  • 目前为最新的稳定版本，相比3.x编译速度提升了近2倍，更好的代码分离机制，更多的模块类型支持，详见
  • 使用其node api模式而非cli模式，目的在于有利于开发环境同时并存多个webpack版本，缺点是每个文件目录会比较大
  • 疑问点，目前大部分项目应该是在3.x版本下构建，迁移成本？

• [email protected]

  • 目前最新的稳定版本，适配[email protected]，v3.1.2之前的版本存在proxy的bug

• @babel/[email protected]

  • 完美解决了babel-polifyll的问题，无需全量打包

• @babel/[email protected]

  • 适配@babel/[email protected]

问题记录

• 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 自行解决