joyer-cli v1.4.7
京东金融构建工具joyer-cli
遇到问题怎么办
- 到这里搜索问题、提交问题
Node版本
统一使用最新的LTS版本,目前为
v8.12.0(LTS)
,推荐安装方式nvm- 原因:Node奇数版本为stable版本,偶数版本为LTS(Long Term Support)版本,后者维护期更长,更稳定
统一使用
npm
作为包管理工具,不使用yarn
使用文档
安装joyer-cli
npm install joyer-cli -g
绑定host(为了能上传预发环境):
172.23.190.105 check.jr.jd.com
版本
1.0.13
之后不再需要此操作- 设置环境变量
JOYER_GIT_TOKEN=[Private token]
(为了能从git.jd.com
获取模板和组件): - 获取Private token, 登录git.jd.com -> 右上角头像-Settings -> 左侧Account -> Private token
- mac设置:
- Terminal用户:打开Terminal,输入
echo 'export JOYER_GIT_TOKEN=[Private token]' >> ~/.bash_profile && source ~/.bash_profile
- zsh用户:打开zsh,输入
echo 'export JOYER_GIT_TOKEN=[Private token]' >> ~/.zshrc && source ~/.zshrc
- Terminal用户:打开Terminal,输入
- win设置,打开cmd,输入
setx JOYER_GIT_TOKEN [Private token] && set JOYER_GIT_TOKEN [Private token]
- 重要:把
[Private token]
整个替换,包括两边的中括号
- 设置环境变量
joyer init 创建新项目
joyer init -h
输出帮助提示joyer init -l
输出可用模板列表joyer init <name>
使用指定模板创建项目,是joyer init -t <name>
的缩写joyer init
不传递参数,创建项目的过程中会提示选择模板以上
<name>
参数均可使用模板索引传入, 例如:joyer init -l
输出:0.zepto - based on zepto, applicable for simple single page 1.vue - based on vue, applicable for complex project 2.react - based on react, applicable for complex project, too
我们可以使用
joyer init 1
或者joyer init vue
来指定使用vue模板创建项目若要终止创建项目,
ctrl+c
结束进程即可
joyer install 安装模板组件joyer-components
joyer install -l
列出所有当前模板可用组件joyer install componentNameA componentNameB
指定组件名并安装joyer install
安装所有可用组件(会覆盖本地已有的组件)
joyer mock 在当前目录启动一个mock服务
当前目录需要有mock.js文件,详细文档见mock wiki
启动命令:
joyer mock //默认端口8001
joyer mock -p 8090 //指定端口8090
joyer serve 静态部署
joyer serve -h
输出有关serve子命令的帮助提示joyer serve -v
查看该joyer-serve版本号我们可以通过在serve后面加入path、port来更加精准的操作它
joyer serve
默认3000端口的当前子目录joyer serve <path>
部署指定目录joyer serve <path> -p <port>
部署指定port的指定目录若要终止serve的运行,
ctrl+c
结束进程即可
joyer-cli内置构建环境文档
重要依赖及选择原因
webpack@4.20.2
- 目前为最新的稳定版本,相比3.x编译速度提升了近2倍,更好的代码分离机制,更多的模块类型支持,详见
- 使用其node api模式而非cli模式,目的在于有利于开发环境同时并存多个webpack版本,缺点是每个文件目录会比较大
- 疑问点,目前大部分项目应该是在3.x版本下构建,迁移成本?
webpack-dev-server@3.1.9
目前最新的稳定版本,适配webpack@4.x,v3.1.2之前的版本存在proxy的bug
@babel/preset-env@7.1.0
- 完美解决了babel-polifyll的问题,无需全量打包
@babel/core@7.1.2
- 适配@babel/preset-env@7.1.0
问题记录
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文件资源引用出错
- 目前已经合并代码但仍未发布
15 days ago
15 days ago
19 days ago
21 days ago
1 month ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
11 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
12 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
1 year ago
1 year ago
1 year ago
1 year ago
2 years 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
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
5 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
5 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
5 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
5 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
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago