@autobest-ui/scripts
介绍
集成react项目在webpack下debug、build, 统一命令,方便维护与升级。
安装
npm install @autobest-ui/scripts --save-dev
使用方式
单页面应用(SPA)
-
本地 hot debug:
react-spa start
-
build:
react-spa build
服务端渲染应用(SSR)
-
本地 client hot debug:
react-ssr start
-
本地 server hot debug:
react-ssr server
-
build:
react-ssr build
配置文件
根目录下创建config
文件夹
config
app.config.js // 为命令提供的私有配置
app.webpack.js // 扩展webpack配置, 非必须选
env.js // 项目私有配置(比如: API BaseUrl配置),这个名字可以自定义
app.webpack.js 介绍
该文件用于webpack扩展, 非必写。写法如下:
module.exports = function(
result,
appConfig,
extendEnv,
{ isProd, isServer, isHotServer }
) {
// 根据条件,对不同环境的配置进行扩展
......
// 最终返回扩展后的结果
return result;
}
app.config.js 介绍
react-spa start
或者 react-ssr start
)
start 配置参数说明(作用于参数名 | 默认值 | 说明 |
---|---|---|
startDefaultPort | 3030 | start默认端口号, 可自定义,下面介绍 |
startOpenPath | '/' | start 打开浏览器的路径 |
getStartEnvConfig | {} | start 自定义环境变量的方法,会追加到process.env中 |
devServer | {} | start 自定义devServer配置 |
react-ssr ssr
)
hot ssr 配置参数说明(作用于参数名 | 默认值 | 说明 |
---|---|---|
hotSsrDefaultPort | 9090 | hot ssr默认端口号, 可自定义,下面介绍 |
hotSsrOpenPath | '/' | hot ssr 打开浏览器的路径 |
hotSsrRunPath | 'server/app.ts' | hot ssr 执行nodejs 入口文件路径 |
hotSsrWatch | ['devPublic', 'devBuild', 'server'] | hot ssr 需要watch的文件夹,类型: Array |
getHotSsrEnvConfig | {} | hot ssr 自定义环境变量的方法,会追加到process.env中 |
react-ssr build
)
build ssr 配置参数说明(作用于参数名 | 默认值 | 说明 |
---|---|---|
getBuildEnvConfig | {} | build ssr 自定义环境变量的方法,会追加到process.env中 |
buildClientLoadableConfig.filename | 'loadable-stats.json' | build ssr 自定义按需加载路径存储库文件名 |
buildClientLoadableConfig.writeToDiskFilename | '/build' | build ssr 自定义按需加载路径存储库文件存放位置 |
公共配置
参数名 | 默认值 | 说明 |
---|---|---|
htmlPluginTemplate | '/index.html' | client端,模板html路径 |
htmlPluginFavicon | undefined | client端,favicon.ico路径,也可以通过nginx配置 |
baseStaticMediaPath | static | 静态资源图片等基础文件夹 |
baseStaticCssPath | css | 静态资源css基础文件夹 |
baseStaticJsPath | js | 静态资源js基础文件夹 |
自定义
系统支持的运行参数
参数名 | 默认值 | 说明 |
---|---|---|
--port 3031 | startDefaultPort值 | 覆盖默认端口号 react-spa start --port 3031
|
--eslint | false | 运行时是否启动语法检查 react-spa start --eslint ,build 情况下该参数失效,不执行语法检查 |
自定义其他参数
例如:
react-spa start --site APW
react-ssr start --port 3032 --site APW
该参数将解析成对象,通过get**EnvConfig()参数传递,此方式,可区分自定义的环境变量,例如:www2.0项目中site的区分。
自定义环境变量
该方式,主要应用于启动程序前,自定义环境变量,主要用于get**EnvConfig()方法的多样性。
例如: cross-env REACT_APP_ENV=local react-ssr start
背景图片问题
推荐把静态资源放到静态库,并使用sass环境变量$env
进行本地调试,若想使用本地文件,需特殊处理。
- scss环境变量
// 其中 $env = process.env.NODE_ENV, 满足background-image链接不全、区分本地与线上样式等需求。
if($env == 'development','为true的样式', ‘为false的样式’)
// 例子
$AssetBaseUrl: 'https://assets-web.dev.autobestdevops.com';
$AssetCommonPath: '/common-uiasset';
$AssetWwwPath: '/www-uiasset';
@mixin getBgImgFromCommon($url) {
background-image: if($env == 'development', url($AssetBaseUrl + $AssetCommonPath + $url), url($AssetCommonPath + $url));
}
@mixin getBgImgFromWww($url) {
background-image: if($env == 'development', url($AssetBaseUrl + $AssetWwwPath + $url), url($AssetWwwPath + $url));
}
- 使用本地文件注意事项
// background image 不解析以"http、https"开头或者/common-uiasset/|/wwwasset/|/onlineasset/开头的静态资源, 例如:'/common-uiasset/img.png'
// 所以本地静态资源需要特别注意,不能创建/common-uiasset/|/wwwasset/|/onlineasset/文件夹
.live-chat {
background: url('imgs/图片名.resolving.png') 0 center no-repeat;
}