tua是一个基于webpack的工作流,集成了下一代开发语言,提供语言层面的支持,并封装了webpack的复杂度。


Keywords
工作流, webpack, babel, postcss, sass, less, karma, test, mocha, es6, workflow
License
MIT
Install
npm install tua@0.11.36

Documentation

tua

tua是一个基于webpack的工作流,集成了下一代开发语言,提供语言层面的支持。 它封装了webpack的复杂度,并集成了webpack使用的最佳实践。 让开发者更加关注业务,而非复杂的配置和工具选择。

快速开始

  1. 通过 npm 或 yarn 安装tua
    npm i -g tua
    yarn add global tua
    注意,使用yarn,需要配置环境变量。否则,全局命令不生效。
  2. 在项目根目录下执行初始化命令
    tua -i
    此命令会在项目根目录下生成 tua 的配置文件tua.js,以及一个简单示例。并自动下载安装所需npm依赖。 可以根据项目需要修改配置。见 tua 配置说明。
  3. 开始调试
    tua -s
    启动服务器。会自动在浏览器(现在默认是chrome)中打开页面。

命令行接口(CLI)

初始化生成项目模板

tua -i

执行后会执行目录下生成简单的项目模板。

模板结构

+ src          代码源文件
  + lib        公共代码库
    utils.js   公用的js
  index.js     入口
  index.html   html模板
+ test         测试文件
  add.js     测试文件
package.json   包配置文件
tua.js         tua配置文件

自动下载

在生成package.json后,npm包的自动安装会启动。优先使用yarn安装,如果没有安装则会选择npm。

生成DLL文件

DLL是套用window中动态链接库的概念。 DLL的使用,是webpack优化的一部分。 把变化不频繁的部分(如 vue react 的库文件等)打到DLL包中,可以提升调试阶段和发布阶段的编译速度,节省时间,提升效率。 如需了解详情,请自行google,这里不再累述。

tua -d

注意,必须在所有 html 文件中里添加如下代码引入 DLL 文件,否则会出错。

<%= htmlWebpackPlugin.options.dlls %>

此命令无需手动执行,在使用 -s-p 时,程序会自动检测是否需要生成或更新 DLL 文件。

启动本地调试服务器

tua -s

启动一个webpack-dev-server,带有热更新。 启动前,会检测是否需要更新 DLL 文件。

打包

打包到本地

tua -p

打包后,资源路径都是本地相对路径,用于本地查看或html和资源部署到同一目录的情况。

打包到服务器

tua -p toserver

打包后,资源路径指向 tua.js 中配置的 serverUrl, 用于使用CDN或者html和资源部署到不同路径的情况。

启动测试

tua -t

集成了 karma + mocha + chai + sinon 的测试框架。 需配置 tua.js 中的 testbase,默认是 test 文件夹。

执行js文件

tua --run {filename}

此文件中可以调用 tua 的模块,以及 tua 依赖的 npm 包。

配置

tua 的配置文件 ./tua.js 在执行初始化命令之后自动在项目的根路径下生成。 tua.js 是一个正规的 nodejs 模块,暂不支持ES6语法。 以下是每一个配置项的说明。

supportIe8 {Boolean}

打包后的文件是否支持 IE8。默认给出的选项是false。 IE8 的支持需要一些特殊的库以及 webpack 插件的支持,当选项为true时,工作流会自动调整配置,以适应IE8的要求。 注意: IE8的支持不完全,某些 ES6 的属性慎用。另外,如需搭配 vue 等不支持 IE8 的库,请自行查询如何配置loader和插件以提供兼容。

cssEnhance [sass, postcss, less]

内置增强css,可选择使用以上其一。

pretty {Boolean | Object}

是否在启动 webpack 时,使用prettier自动格式化代码。 如果需要格式化代码,则pretty的值应该是 prettier 的配置。

enableProfile {Boolean}

是否生成profile文件,profile可用于查看生成块的大小等信息。 如果选是,打包完成后,会自动打开集成的profile工具,可方便的查看每个 chunk 的信息。

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) 可以加快编译速度,减少等待时间。

pageEntrys {Function}

配置项目的入口,重要属性,必须配置。 值需要是一个匿名函数。

 /**
 * @param params 用于过滤等功能的cli传过来的参数 两个命令可以传递此参数 tua -s ?params, 或者 tua -p toserver?param / tua -p ?params
 * @returns {Array}
 * {
*      htmlout: {String} 生成后的html文件的路径,相对于 {dist} 路径
*      htmlsrc: {String} 源html文件模板路径,相对于项目根路径
*      jssrc: {Array} html文件对应的js入口文件地址, 必须是数组
*      jsout: {String} html对应的js或css打包后的块名称,只是名称,所有模块打包后 script 会放到 {dist}/scripts/ 下
*                      css会放到 {dist}/styles/ 下
* }
pageEntrys: function (params) {
    return [{
        htmlsrc: '',
        htmlout: '',
        jssrc: [''],
        jsout: ''
    }];
}

参数 函数接受一个参数,可以在 -s-p 阶段,用 ?xxx 的方式传递过来,常用于优化调试速度,或部分打包上线。默认会打包所有页面。 返回值需要是一组符合上述结构的对象。

html {Object}

html-webpack-plugin 中关于html生成的压缩配置。见:https://github.com/kangax/html-minifier#options-quick-reference

testbase {String}

测试文件路径

dist {String}

打包代码输出的文件夹路径,需要是绝对路径。

src {String}

代码source路径,缩小loader的处理范围。

serverUrl {String}

执行打包到 toserver 时,静态资源会上传至cdn,此为静态资源文件夹地址。

open {Boolean | Object}

{
    uri: 'xxx.html'
}

执行 -s 后,启动服务器成功后浏览器打开地址。 值 false 时,不自动打开浏览器

devServer {Object}

{
    proxy: {
        "/api": {
            target: "http://localhost:3000", //代理的服务器地址
            bypass: function (req, res, proxyOptions) {
                //过滤器
            }
        }
    },
    port: 9527
}

可设置proxy和端口号。

resolve {Object}

{
    /**
     * 别名配置,可以配置短路径和文件
     * eg. "jquery" : require("./lib/jquery")
     */
    alias: {
        // "jquery" : require("./lib/jquery")
    }
}

可配置别名,如上例为 jquery 配置了别名。

globalVar {Object}

为某些模块配置全局变量。 如:

{
    $: 'jquery'
}

dllchunk {Object}

配置dll块,至少配置一个,否则会出错。 如:

{
    vendor: ['./src/lib/utils'],
    // vendor2: ['./lib/kEvent']
}

进阶

参数传递

tua.js 配置文件中的 pageEntry 方法可以接收一个名为 params 的参数:

pageEntrys: function (params) {
   //params可以用于过滤入口和html文件
   return entryDatas;
}

这个参数在过滤入口和页面时会显得尤为有用,它可以通过执行 -s-p 后添加 ?param 来添加

tua -s ?params
tua -p ?params
tua -p toserver?params

设置目标浏览器环境

不区分开发阶段的配置

在 tua.js 的配置文件中, env.browsers 可以用来设置目标浏览器。值可以是 {Array<string> | string}

env:{
browsers: {Array<string> | string}
}

区分测试和发布阶段的配置

一般,在debug模式下,可以只支持chrome就可以完成开发。

env:{
    browsers: {
         debug: {Array<string> | string},
         publish: {Array<string> | string}
    }
}

使用工具中的模块

获取当前环境

let env = require("@tua/utils/env");
console.log(env.DEBUG);
console.log(env.PUBLISH);
console.log(env.TOSERVER);

以上方式可以获取当前是处于 DEBUG,PUBLISH,TOSERVER 的状态,方便自助扩展webpack使用。

自定义启动文件

执行命令

tua --run start.js

start.js

let tua = require("@tua");
tua.start();

以上代码可以启动 dev server。 可用的 tua API,见下面部分。

API

.DLL(suc, fail)

根据 tua.js 中的配置,生成 dll 文件。

suc

生成dll文件成功后的回调

fail

生成dll失败后的回调

sucfail都是可选参数。

.start(params, callback, spinner)

启动服务器

params

参数,可用于过滤入口

callback

启动服务器成功后的回调

spinner

webpack的devserver启动中,需要此对象展示阶段性信息,不传默认不展示。

三个参数都是可选。

.pack(stat, params, suc, fail)

打包发布项目

stat

PUBLISH TOSERVER 两种选一,不传默认是PUBLISH

params

参数,可用于过滤入口

suc

成功回调

fail

失败后的回调

四个参数都是可选。