baidu-acu-react-tools

4.0.11 • Public • Published

脚手架构建功能

// 创建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,提交代码合入之后,便能得到公版构建产物。这样对于同样一套业务代码,可以灵活的配置不同的私有化配置,部署诉求。

Dependents (1)

Package Sidebar

Install

npm i baidu-acu-react-tools

Weekly Downloads

3

Version

4.0.11

License

MIT

Unpacked Size

473 kB

Total Files

138

Last publish

Collaborators

  • tonyjeffreyn
  • dingyang
  • lvxiaodi1234
  • wz57c
  • sanxy