README
tua
tua是一个基于webpack的工作流,集成了下一代开发语言,提供语言层面的支持。 它封装了webpack的复杂度,集成了webpack使用的最佳实践。 让开发者更加关注业务,而非复杂的配置和工具选择。
1. 快速开始
- 通过 npm 或 yarn 安装tua
npm i -g tua
yarn global add tua
注意,使用 yarn,需要配置环境变量。否则,全局命令不生效。
- 在项目根目录下执行初始化命令
tua new
此命令会在项目根目录下生成 tua 的配置文件.tuarc
,以及一个简单示例。并自动下载安装所需npm依赖。
可以根据项目需要修改配置。见 tua
配置说明。
- 开始调试
tua start
启动服务器。
打开页面
在浏览器中输入 http://localhost:9527/hindex.html http://localhost:9527/sports.html查看页面
在浏览器中输入 http://localhost:9527/helloexpress 查看直出页面
2. 命令行接口(CLI)
2.1. 初始化生成项目模板
tua new
tua n
执行后,会在执行目录下生成项目模板。
2.1.1. 模板结构
+ app 代码源文件
+ lib 公共代码库
utils.js 公用的js
a.js 异步模块
index.js 入口
index.html html模板
index.scss sass文件
sports.html html模板
sports.js 入口
+ server
boot.js 适配服务端框架的直出启动文件(比如tsw)
index.js 直出入口
sports.js 直出入口
+ test 测试文件
add.js 测试文件
package.json 包配置文件
.editorconfig 编辑器配置文件
.gitattributes Git配置
.gitignore Git忽略提交规则
.tuarc tua配置文件
README.md 项目说明文件
2.1.2. 自动下载
在生成 package.json 后,npm 包的自动安装会启动。优先使用 yarn 安装,如果没有安装则会选择 npm。
2.2. 生成DLL文件 Deprecated
DLL是套用window中动态链接库的概念。 DLL的使用,是webpack优化的一部分。 把变化不频繁的部分(如 vue react 的库文件等)打到DLL包中,可以提升调试阶段和发布阶段的编译速度,节省时间,提升效率。 如需了解详情,请自行google,这里不再累述。
tua dll
此命令无需手动执行,在使用 start
或 pack
时,程序会自动检测是否需要生成或更新 DLL 文件。
2.3. 启动本地调试服务器
2.3.1. 使用默认框架express
tua start
启动一个 webpack-dev-server(框架是express), 带有热更新。 启动前,会检测是否需要更新 DLL 文件。
2.3.2 使用 koa
默认情况下,webpack-dev-server 提供一个 express 的服务器,tua 额外提供对 koa 的支持,只需在此命令的末尾添加 -k
或者 --koa
,
tua start --koa
tua start -k
以上命令会启动 Koa 服务器。
2.3.3. 给 pages 配置传递参数
pageEntries方法是入口的生成函数,见 3.6
启动本地服务时,在 start
后添加字符串,可以当做参数传递给 pages
方法,用于筛选页面等。
tua start index
2.4. 打包
2.4.1. 打包本地使用
tua pack
打包后,资源路径都是本地相对路径,用于本地查看或html和资源部署到同一目录的情况。
打包会同时打包客户端代码和服务端代码,服务端代码入口在 serverEntry
配置处设置。见下文详细说明。
2.4.2. 打包服务器使用
tua pack -t
tua pack --toserver
打包后,资源路径指向 .tuarc 中配置的 serverUrl
, 用于使用 CDN 或者 html 和资源部署到不同路径的情况。
2.4.3. 给 pages 配置传递参数
pageEntries方法是入口的生成函数,见 3.6
启动本地服务时,在 start
后添加字符串,可以当做参数传递给 pages
方法,用于筛选页面等。
tua pack index
2.5. 启动测试
需安装插件支持:@babel/test
tua test --stage {stage}
tua test -s {stage}
stage的值从 [‘start', 'run', 'stop', 'init', 'completion'] 选择。
集成了 karma + mocha + chai + sinon
的测试框架。
需配置 .tuarc 中的 testbase
,默认是 test 文件夹。
2.6. 执行js文件
tua run filename
从目标文件启动,可自行封装start等命令。 此文件中可以调用 tua 的模块,以及 tua 依赖的 npm 包。
2.7. 新增模板
需安装插件: @tuax/cli
- 初始化项目(代理 vue-cli v2 的 init 功能)
tua init <template-name> <project-name>
- 新增 api
# 新增 web 端 api
tua add api <api-name>
# 新增小程序端 api
tua add api <api-name> -w
- 新增页面
# 新增 web 端 page
tua add page <page-name>
# 新增小程序端 page
tua add page <page-name> -w
- 新增组件
# 新增 web 端 comp
tua add comp <comp-name>
# 新增小程序端 comp
tua add comp <comp-name> -w
# 新增 web 端全局 comp
tua add comp <comp-name> -g
# 新增小程序端全局 comp
tua add comp <comp-name> -g -w
2.8. 导出默认模板
这个命令将包中的默认模板导出到 .templates/
中。
这样通过修改.templates/
下的模板文件,即可实现自定义模板功能。
tua eject
2.9. 指定模板文件夹
读取模板的优先级逻辑是:
- 首先尝试使用
tua.config.js
中的templateDir
字段 - 接着尝试读取
.templates/
- 最后读取默认模板
2.10 生成接口声明命令
这个命令将读取导出的 apis 然后自动生成 index.d.ts
。
tua declare [apisPath]
apisPath
默认值为src/apis/index.js
index.d.ts
将生成在apisPath
同级目录下
由于使用 require
读取导出 apis 对象的文件,所以可能会碰到 alias
问题。例如项目中设置了 @
作为 ./src/
的别名。虽然 @tua-mp/cli
已内置了一些 alias
,但你仍然可以自由配置。
在 tua.config.js
中的 alias
选项会透传给 babel-plugin-module-resolver,例如将 foobar
指向 './src/foobar' 可以这么配置:
// tua.config.js
module.exports = {
alias: {
'foobar': './src/foobar',
},
}
3. 配置
tua 的配置文件 ./.tuarc
在执行初始化命令之后自动在项目的根路径下生成。
.tuarc 是一个正规的 nodejs 模块,暂不支持ES6语法。
以下是每一个配置项的说明。
3.1. supportIe{Boolean} deprecated in 0.9.0
打包后的文件是否支持 IE8。默认给出的选项是false
。
IE8 的支持需要一些特殊的库以及 webpack 插件的支持,当选项为true
时,工作流会自动调整配置,以适应IE8的要求。
注意: IE8的支持不完全,某些 ES6 的属性慎用。另外,如需搭配 vue 等不支持 IE8 的库,请自行查询如何配置loader和插件以提供兼容。
注: 0.9.0 已经不再支持IE8。
3.2. cssEnhance {Array<string, object> | string | object }
css 增强loader,单个loader配置符合 webpack 标准的loader配置
注:需要在项目中安装插件支持 @tuax/plugin-css-preprocessor
3.2.1. 支持的loader
- 内置css loader: sass,postcss,less
- 本地安装的 css loader 需要加上 -loader,如使用本地安装特定版本的 postcss, 可配置成 postcss-loader
3.2.2. 关于 postcss
默认配置中,postcss使用的插件如下:
- postcss-smart-import
- precss
- autoprefixer
配置文件生成规则如下:
自动生成 .postcssrc.js 默认会根据浏览器环境配置
env
在项目根目录下生成 .postcssrc.js, 此文件使用 tua 包中默认安装的 postcss插件地址,因此每人机器上配置文件不同,不要上传到版本库。用户自定义配置 postcss.config.js 用户在定义了 postcss.config.js 的情况下,上述配置文件不会自动生成,如果已经生成,请手动删除,以免造成不确定性的bug。
3.2.3. 注意事项
- 数组对象配置的顺序符合webpack loader加载对象从右向左处理的顺序
3.3. ~~ pretty {Boolean | Object} ~~
是否在启动 webpack 时,使用prettier自动格式化代码。
如果需要格式化代码,则pretty
的值应该是 prettier 的配置。
3.4. enableProfile {Boolean}
需要安装插件支持:@tuax/plugin-profile
是否生成profile文件,profile可用于查看生成块的大小等信息。 如果选是,打包完成后,会自动打开集成的profile工具,可方便的查看每个 chunk 的信息。
3.5. env {Object}
/**
* 定义浏览器环境,babel-preset-env 插件使用的环境
* browsers {Array<string> | string} 浏览器支持
* 或者 {
* debug: {Array<string> | string}, 浏览器支持
* publish: {Array<string> | string} 浏览器支持
* }
* https://github.com/ai/browserslist http://browserl.ist/
*/
browsers: {
debug: '',
publish: ''
}
可分别定义debug阶段和发布阶段打包支持的浏览器环境。 在调试阶段把环境设置成固定的(比如 chrome) 可以加快编译速度,减少等待时间。
3.6. pages {Function}
配置项目的入口,重要属性,必须配置。 路径中注意要统一使用 / , windows 中会使用 \ ,需自行处理 值需要是一个匿名函数。
/**
* 生成entries入口的函数,返回数组类型,每个对象都应包括四项, 路径中注意要统一使用斜杠 / ,windows 中会使用 \ ,需自行处理
* @param param 用于过滤等功能的cli传过来的参数 两个命令可以传递此参数 tua start --param, 或者 tua pack -t toserver --param / tua pack --param
* @return Object {
* index: {
* // page 的入口
* entry: './src/index',
* serverEntry: './src/index.server', //ssr 不能独立于终端的 entry 存在,因此,每一个终端入口 +.server 的方式命名的 js 文件都是此页面的ssr方式的入口
* // 模板来源
* template: 'src/index.html',
* inlineSource: '.css|js