brain-cli
Version:
A command line tool used to run projects
383 lines (325 loc) • 11.1 kB
Markdown
# brain-cli
## 介绍(Introduction)
在日常开发中，我们经常需要用到 webpack 作为打包工具，但每次新建一个项目，都需要去配置一次，虽然配置一次之后，后面都可以进行复制，但这样还是很繁琐。而且每个人水平不一样，不可能要求所有人都非常熟悉 webpack,然后在团队开发中，我们需要对配置统一。基于这些原因，
我们对 webpack 配置进行二次封装(js 文件打包拆分，css 单独打包，打包时间优化，反向代理，多入口处理等)，对外部暴露少量配置，用于满足一些特殊的要求。
## 使用
npm install brain-cli -D 或者 yarn add brain-cli
## barin-cli 优势
- 基于 webpack4.x、继承 react16.x 开发环境
- 支持多入口
- 不同入口页面 css/js 单独合并压缩
- 支持生成 ejs,jsp 模板页面
- 支持 webpack dll
- 支持增量构建
- 静态文件加戳
- 支持反向代理
- 支持对指定入口文件进行编译，打包
- 支持多套环境配置文件切换
- 支持 typescript
## 常用命令介绍
##### 编译命令
- brain-cli dev 运行开发模式
- brain-cli build dev 运行开发模式
- brain-cli build prod 生产环境
- brain-cli build test 测试环境
- brain-cli build dist 预发布环境(一般很少用到,特殊情况可以使用)
- brain-cli build -s 构建大小分析
- brain-cli build dev --apps=app1,app2 (编译指定入口文件)
- brain-cli build prod --apps=app1,app2 (编译指定入口文件)
- brain-cli build test --apps=app1,app2 (编译指定入口文件)
## .e-config
```js
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const chalk = require("chalk");
module.exports = {
name: "test",
open: true,
defaultPort: 8001,
server: "0.0.0.0",
imageInLineSize: 8192,
isTslint: true,
publicPath: "/public/",
devServer: {
noInfo: true,
proxy: {
// '/main': {
// target: 'https://xxx.com/',
// //changeOrigin: true,
// secure: false,
// onProxyReq: (proxyReq, req, res) => {
// proxyReq.setHeader('host', 'xxx.com')
// proxyReq.setHeader('cookie', ' a=1111')
// }
// },
},
},
postcss: {
// px2rem:{
// rootValue: 75,
// unitPrecision: 3,
// },
autoprefixer: {
/**
* 参考dora配置
*/
browsers: [
"last 2 versions",
// "Firefox ESR",
"Firefox >= 15",
"> 1%",
"ie >= 8",
"not ie<=8",
],
},
},
webpack: {
dllConfig: {
vendors: ["react", "react-dom", "invariant"],
},
disableReactHotLoader: false,
happyPack: {
open: false,
},
commonsChunkPlugin: ["common", "vendor"],
plugins: [
new ProgressBarPlugin({
summary: false,
format:
`${chalk.green.bold("build [:bar]")}` +
chalk.green.bold(":percent") +
" (:elapsed seconds)",
summaryContent: "",
}),
],
},
babel: {
query: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage", // entry usage entry模式兼容IE11
corejs: "3",
targets: {
browsers: [
// 浏览器
"last 2 versions",
"ie >= 10",
],
},
},
],
/* "@babel/preset-env", */
"@babel/preset-react",
],
cacheDirectory: true,
plugins: [
"add-module-exports",
"@babel/plugin-transform-runtime",
[
"@babel/plugin-proposal-decorators",
{
legacy: true,
},
],
[
"import",
{
libraryName: "antd",
style: true,
},
],
],
},
},
htmlWebpackPlugin: {
title: "webApp" /**/,
},
apps: ["app1", "app2", "app3"],
};
```
#### webpack dll build
- brain-cli dll
### 配置参数
#### config.webpack.dllConfig
支持默认配置及自定义文件
1. vendors
```md
默认值 ['react'],如果需要配置复杂信息，则可以由数组变成对象
{
externalUrl: ''; //可选参数 当设置了此值，则 index.html dll 文件 url 变成外部链接
value:[],// 需要打包到 dll 文件的库
options: {
libraryTarget: 'umd' | 'var' | 'commonjs2' | 'commonjs' | 'amd' | 'window' | 'global' | 'this', // dll 文件模块输出模式
//当使用了 libraryTarget: "umd"，设置：true 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
umdNamedDefine?: boolean;
// globalObject为改变全局指向
globalObject?:'this'
}, // 可选参数
}
```
2. customDll(自定义 dll 文件)
```md
[
{
key: '' // dll 文件名称
externalUrl?: '' // 当设置了此值，则 index.html dll 文件 url 变成外部链接
value: [],// 需要打包到 dll 文件的库
options?:{
libraryTarget: 'umd' | 'var' | 'commonjs2' | 'commonjs' | 'amd' | 'window' | 'global' | 'this', // dll 文件模块输出模式
//当使用了 libraryTarget: "umd"，设置：true 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
umdNamedDefine?: boolean;
// globalObject为改变全局指向
globalObject?:'this'
}
}
]
```
3. compileOptions(全局生效配置)
```md
当在 dllConfig,配置了该参数，即可生效到所有 dll 文件，等同于配置了 options 参数，当 dll 文件指定了自身局部配置数据，则生效局部数据
{
libraryTarget: 'umd' | 'var' | 'commonjs2' | 'commonjs' | 'amd' | 'window' | 'global' | 'this', // dll 文件模块输出模式
//当使用了 libraryTarget: "umd"，设置：true 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
umdNamedDefine?: boolean;
// globalObject为改变全局指向
globalObject?:'this'
}
```
#### config.webpack.extend
首先它是一个函数，执行会抛出底层 loaders 等数据，当默认 loaders 不满足使用时，可以传入此配置用于扩展增强
```ts
interface ITransform{
readonly cssModule: {
modules: boolean;
importLoaders: number;
localIdentName: string;
},
readonly LoaderOptions: postcss_loader,
execution:(cssModule,loader,currLoader)=>loader.use
}
interface IOptions{
isDev:boolean;
type:'hotLoader' | 'jsLoader' | 'tsLoader' | 'styleLoader';
transform:ITransform
}
function (loaders:[], options:IOptions={
isDev,loaderType,transform
})
// 例如
function (loaders,{ isDev, loaderType, transform }){
const nodeModulesPath=path.resolve('../../', 'node_modules')
if (type === 'js_loader') {
if (loaders.length) {
}
}
if (type === 'ts_loader' ) {
}
if (type === 'style_loader' && transform) {
loaders.push({
test: /\.css$/,
use: transform.execution(null, null, null),
include: [path.resolve(nodeModulesPath)],
},)
}
}
```
#### config.webpack.[tsCompilePlugin](https://github.com/TypeStrong/ts-loader#loader-options)
```ts
option: {
getCustomTransformers: () => ({ // 示例， 可根据ts-loader options 文档去进行自由配置
before: [
createTransformer(),
createTransformerReactJsxProps({
components: [
{ name: 'LegionsProTable', props: 'uniqueUid', value: '' },
{ name: 'LegionsProForm', props: 'uniqueUid' },
{ name: 'LegionsProTabsForm', props: 'uniqueUid' },
{ name: 'LegionsProDataImport', props: 'uniqueUid' },
{ name: 'LegionsProConditions', props: 'uniqueUid' },
],
}),
],
}),
},
```
#### config.webpack.[happyPack](https://github.com/amireh/happypack)
> 1.配置信息
```ts
interface IHappyPack{
/** 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。 */
threads?: Number;
/** 是否允许 HappyPack 输出日志，默认是 true。 */
verbose?: Boolean;
/** 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多。 */
threadPool?: any;
/** 开启webpack --profile ,仍然希望HappyPack产生输出。 */
verboseWhenProfiling?: boolean;
/** 启用debug 用于故障排查。默认 false。 */
debug?: boolean;
}
{
open:false // 是否开启多线程
/** js 线程配置 */
procJs?: IHappyPack;
/** ts 线程配置 */
procTs?: IHappyPack;
}
```
> 2.开启多线程时，如果是编译 ts,tsx 文件，默认使用 ts-loader, 这时多进程下存在使用插件无法生效[问题](https://github.com/Igorbek/typescript-plugin-styled-components#forked-process-configuration)
```ts
const {
createTransformer,
createTransformerReactJsxProps,
} = require('ts-plugin-legions');
// 2. create a transformer;
// the factory additionally accepts an options object which described below
// 3. create getCustomTransformer function
const getCustomTransformers = () => ({ before: [createTransformer([
{
libraryName: 'legions/store',
bindings: ['StoreModules'],
},
]),
createTransformerReactJsxProps({
components: [
{ name: 'LegionsProTable', props: 'uniqueUid', value: '' },
{ name: 'LegionsProForm', props: 'uniqueUid' },
{ name: 'LegionsProTabsForm', props: 'uniqueUid' },
{ name: 'LegionsProTabsForm', props: 'uniqueUid' },
{ name: 'LegionsProConditions', props: 'uniqueUid' },
{ name: 'HLDataImport', props: 'uniqueUid' },
],
}),] });
// 4. export getCustomTransformers
module.exports = getCustomTransformers;
// webpack.ts-transformers.js
tsCompilePlugin: {
option: {
getCustomTransformers:path.join(__dirname, './webpack.ts-transformers.js'),
},
},
```
## changeLog webpack4.x
## v1.1.3
- 【chore】优化loader加载器配置结构
## v1.1.1
- deprecate: 废弃部分不合适的参数配置 **disableHappyPack** , **cssModules**
- chore: 优化多进程由强制开启变成可以自由控制
- fix: 修复版本更新探测代码无法生效
- chore: 优化控制台输出信息
- chore: 升级 typescript 版本至 4.x
## v1.0.8-alpha.6(2020-12-01)
- feat: 新增 webpack 配置文件输出属性 output 支持自定义 library 及 libraryTarget
- feat: 新增 webpack dll 配置文件输出属性 output 支持自定义 libraryTarget 及其他属性
- feat: 新增 webpack dll 插件支持自定义
- fix: 修复 file-loader 插件通过 require 引入文件及样式引入文件,404 问题
- 升级 webpack 版本 4.x
## changeLog
## v0.3.28-beta.3 (2020-12-01)
- feat: 新增 webpack dll 配置文件输出属性 output 支持自定义 libraryTarget 及其他属性
- feat: 新增 webpack dll 插件支持自定义
## v0.3.28-beta.1 （2020-11-13）
- feat: 新增 webpack 配置文件输出属性 output 支持自定义 library 及 libraryTarget
## License
[MIT](LICENSE)