@autobest-ui/scripts v1.10.0

@autobest-ui/scripts

介绍

集成react项目在webpack下debug、build， 统一命令，方便维护与升级。

安装

npm install @autobest-ui/scripts --save-dev

使用方式

单页面应用（SPA）

1. 本地 hot debug: react-spa start

2. build: react-spa build

服务端渲染应用（SSR）

1. 本地 client hot debug: react-ssr start

2. 本地 server hot debug: react-ssr server

3. 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 介绍

start 配置参数说明(作用于react-spa start 或者 react-ssr start)

hot ssr 配置参数说明(作用于react-ssr ssr)

build ssr 配置参数说明(作用于react-ssr 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;
}