-
统一使用较新的LTS版本，推荐
v16.20.2 (LTS)(2023-08-10), 安装方式nvm- 原因：Node奇数版本为stable版本，偶数版本为LTS(Long Term Support)版本，后者维护期更长，更稳定
-
统一使用
npm作为包管理工具，不使用yarn
npm install joyer-cli -g
-
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自行解决