Baidu-acu-react-tools NPM

脚手架构建功能

// 创建my-app项目 npx create-react-app fe_source --scripts-version baidu-acu-react-tools

// 安装依赖，这步一定要做！虽然初始化的时候会装一些依赖在node_modules中，但不完整，所以要重新安装下依赖。 npm i

// 构建dll js npm run dll

// 启动了 npm run server

baidu-acu-react-tools

基于react与antd等技术栈的命令行工具集合。本工具目标整合DevServer、Webpack、Build、Lint、Test、Babel等一系列功能，使产品线不再重复性地维护复杂的配置文件及相关脚本。

配置规则

使用该工具，大部分配置已经使用webpack和react社区默认做法，不需要额外处理。但是每个项目依然可以根据实际需要作出一些定制化，配置有两个入口, 都放在项目根目录下，分别是reactTools.config.js 和 private.json

配置整个项目: reactTools.config.js
配置单个私有化项目的分发版本

设计上，private.json的优先级高于 reactTools.config.js。

在 projectHelper文件中的getBizToolsAndPrivateConfig方法中，tools将试图读取两部分的配置，并且合并成为最终版配置。如果新添加了字段，需要在tools的脚本运行时生效，需要在getBizToolsAndPrivateConfig中处理合并逻辑，并且在相关脚本中读取变量并操作。

配置规则之 reactTools.config

该配置是为了处理整个项目级别的配置。大多数情况下作为公版发布。

const {join} = require('path');
const i18n = require('@baiducloud/i18n/transform-plugin');

const context = __dirname;

module.exports = {
    context: context,
    module: 'starter', // 必填项：模块简写，注意使用这套框架的module必须唯一 当前已被占starter、bml
    privateDeploy: true, // 选填项：如果设置为false，且cdnUrl和BOSConfig存在，才使用cdn地址
    build: {
        title: '数字人监控平台', // 项目title
        entry: join(context, 'src/main.js'), // entry文件
        output: join(context, 'dist'), // 产出的位置
        htmlTarget: join(context, 'public/index.html'), // html入口配置
        publicPath: '/',
        distSourceFolderName: 'static', // 输出中存放js、css及img资源的文件夹名字
        toolsPath: 'tools', // tools文件夹名字
        port: 3000, // node服务端口
        consoleHub: false, // 选填项：默认为false，设为true且构建命令--console=bce产出极简命名[id].[chunHash:8].(css|js)
        inlineSourceRegx: false, // 是否开启inlineSource模式，亦可传入匹配规则如.(js|css)$匹配inline资源
        splitChunksConfig: { // 重定义splitChunks配置
            minSize: 2500000,
            maxSize: 3000000,
            additionCacheGroups: [{ // 自定义打包模块组
                name: 'monaco',
                priority: 60,
                modules: ['monaco-editor']
            }]
        },
        additionPlugins: [
            new MonacoWebpackPlugin({
                languages: ['javascript', 'sql', 'python', 'json']
            })
        ],
        additionBabelConfig: { // 业务用babel扩展配置
            plugins: [
                [i18n.react, {
                    library: '@baiducloud/i18n',
                    output: 'dist/i18n'
                }]
            ]
        },
        externals: {
            '@baiducloud/i18n': 'i18n' // 为i18n提供一个全局变量，而不引入@baiducloud/i18n
        },
        credentials: { // 本地开发https证书配置
            key: '',
            cert: ''
        }
    },
    mockServer: {
        // mockProxyTarget: 'http://1.1.1.1:8080/', // mock代理服务地址（包括端口）
        port: 3001 // mockup服务端口
    }
};

配置规则之 private.json

该配置是为了处理单个私有化项目级别的配置。大多数情况下作为特定私有化版本发布。需要将enabled设置为true才能生效。

{
    "enabled": false,
    "company": "pufa",
    "distSourceFolderName": "console",
    "moreParam": "bbbb"
}

使用案例

在某一个私有化产品中，比如有XX管理平台，需要分发给n个客户。所有客户公用的配置，都写到reactTools.config之中，默认不要开启private.json。 A客户的项目如果有定制化的需求，比如项目名称，构建产物打包路径需要定制化，可以开启private.json 中的 enabled，设置其他变量，提交合入代码之后，icode上新的构建产物即可满足需要。 B客户需要用公版，只需要把enable字段改为false，提交代码合入之后，便能得到公版构建产物。这样对于同样一套业务代码，可以灵活的配置不同的私有化配置，部署诉求。