ucf-scripts

介绍

集成了最新的技术栈包括babel7,autoprefixer,less,postcss,webpack5、高度封装、简化配置、无多余依赖、具有服务启动、开发调试、代理访问、数据模拟、构建资源、自动刷新功能。快速开发UCF微服务工程底层配套工具支撑，详情文档

安装

工具可以依赖UCF项目工程通过scripts运行

使用

1. 通过npm scripts启动

配置精简ui模板地址 http://git.yonyou.com/yonyou-ide/tinper-next-packages/next-webapp （ts项目切换为typescript分支）

# 开发启动
$ npm start

# 开发构建
$ npm run build

# 初始化模板
$ ucf-scripts init app1
在当前目录创建一个文件命是app1的模板项目

内置已经集成ucf-scripts的启动

命令行

• --port 本地启动端口
• --https 内置证书密钥，支持https启动服务
• --homepage 自动开启浏览器打开某个模块
• --mode=dev 构建开启调试模式，不启用代码压缩
• --mode=commitlint 本地开启commit-msg校验（init模式）

  "scripts": {
    "start": "ucf-scripts start --port=9000 --https --homepage=demo",
    "build": "ucf-scripts build",
    "build:dev": "ucf-scripts build --mode=dev",
    "build:dev": "ucf-scripts init --mode=commitlint"
  }

启动方式对比优劣

全局启动和项目内脚本启动区别：

| 启动方式 | 优点 | 缺点 | | --- | --- | --- | | 全局启动 | 无需根据项目一次次安装重复依赖npm包节省磁盘空间速度 | 不受项目内工具版本控制，会导致每个开发者环境不统一，出现未知版本错误等 | | 脚本启动 | 无需管理全局环境变量、不污染全局变量、随时根据项目内版本更新、可控每一次版本 | 多次项目使用需要反复安装、占用磁盘空间大 |

项目配置文件说明

UCF微服务前端工程核心配置文件只有一个ucf.config.js下面对配置文件说明：（默认精简）

module.exports = (env, argv) => {
    return {
        // 启动所有模块，默认这个配置，速度慢的时候使用另外的配置
        bootList: true,
        // 代理的配置
        proxy: [
            {
                enable: true,
                headers: {
                    "Referer": "https://mock.yonyoucloud.com"
                },
                //要代理访问的对方路由
                router: [
                    '/mock'
                ],
                url: 'https://mock.yonyoucloud.com'
            }
        ],
        // 全局环境变量
        global_env: {
           GROBAL_HTTP_CTX: JSON.stringify("/iuap_demo"),
        },
        // 别名配置
        alias: {
            // 'ucf-apps': path.resolve(__dirname, 'ucf-apps/')
        },
        // 构建排除指定包
        externals:{
          
        }
    }
}

功能配置节点说明

| 配置项 | 说明 | 默认值/类型 | 可选值 | 备注 | | --- | --- | --- | --- | --- | | bootList | 启动、构建入口配置，true表示所有模块全部启用，数组参数按需模块使用 | true | true['app-name'] | 一般默认开启所有模块的调试和构建，低配置机器或者只需要开发一块模块的话可以选择性的去配置单独启动 | | bootName | 统一的 入口文件名称 如 bootstrap.js bootstrap.js 内容为: import('./app');如未设置添加则默认为 app.js(tns 不会生效); | app.js | bootstrap.js | 每个入口模块的src/app.js同级目录内必需包含一个该名称命名的文件 | | proxy | 开发调试阶段的代理服务配置 | [] | enable:true 是否有效代理,false表示关闭. headers:{} 设置代理请求的消息头. router:['/iuap','wbalone']. url:'proxy.example.com'. 本地请求代理对方服务器地址. pathRewrite:{}URL重写服务.  opts:{} 如内置配置无法满足需求，需要单独设置原生配置 http-proxy-middleware. | 数组节点可以配置多条代理服务，通过enable来控制启用哪个，针对一些服务器校验头信息例如：Referer等就需要设置，其他常规的设置工具已经内置，代理路由router表示设置的几个路由访问后会代理到对方服务器上，url就是对方服务器地址 | | publicPath | 指定资源文件引用的目录，打包目录上下文 | string | '/' | | | context | 脚手架输出上下文 | string | '/' | | | limit | 打包图片图标的限制文件大小 | number｜object | 8196或者{img:8196,icon:8196,} | | | hash | 构建模式下，打包文件添加hash，文件指纹位数 | number | object | 8或者{js:8,css:8} | 生产阶段使用的 | | devtool | webpack的devtool配置 | 开发模式默认为source-map生产模式为false | - | | | static | 静态目录，开发态默认会拷贝输出到编译目录下面 | undefined | - | 脚手架内的任意文件夹即可，如：static : 'ucf-common/src/static' | | host | 自定义IP、域名启动 | "127.0.0.1" | 支持IPV4、IPV6、域名 | | | scan_root | 自定义文件夹作为扫描微应用入口，原则上是按照./自定义目录/*/src/app.js扫描 | ucf-apps | - | | | dist_root | 输出自定义文件夹 | ucf-publish | - | | | templateType | 入口文件模板类型 | html | ejs、html | | | global_env | 程序内公共变量 | null | 同webpack5 { key : value } | 接收K、V格式如：{GROBAL_HTTP_CTX: JSON.stringify("/iuap_demo")} | | extensions | 自定义扩展 | 内置ts、tsx、js、jsx、less、json、css | | | | externals | 排除指定的包用外部变量代理提升打包性能 | | 同webpack5 { key : value } | 接收K、V格式如：{'tinper-bee': 'TinperBee'} | | alias | 别名 | null | 同webpack5 {key : value} | 接收K、V格式如：{'ucf-apps': path.resolve(__dirname, 'ucf-apps/')} | | tnsCfg | tns配置 | undefined | - | 默认不启用tns服务器，如需启用需配置 {enabled: true, ...otherTnsPluginOptions}，otherTnsPluginOptions参考@tinper/next-plugin配置 | | presetConfig | 特征开关，控制内部一些属性的开关 | object | 默认都开启，具体用法见说明 | | | ruleConfig | 对内置的rule做自定义配置修改 | function｜object | 具体用法见详细说明 | 对象类型完全覆盖内置默认参数，函数类型可基于内置类型扩展 | | loaderConfig | 对webpack的loader做的一些配置 | function｜object | 具体用法见详细说明 | 对象类型完全覆盖内置默认参数，函数类型可基于内置类型扩展 | | pluginConfig | 对webpack的plugin做的一些配置 | function｜object | 具体用法见详细说明 | 对象类型完全覆盖内置默认参数，函数类型可基于内置类型扩展 | | webpackConfig | 最后执行，复写定制最终的webpack配置 | function | 具体用法见详细说明 | |

详细说明

bootList

启动控制器，用于设置启动哪些微应用，可以单独启动某一处，也可以启动所有

//单独启动所有ucf-apps下面的所有模块
bootList:true

// 单独启动demo1、demo2
bootList: [
  "demo1",
  "demo2"
]

bootName

统一的 入口文件名称 默认为app.js。每个微应用的入口都应该有一个app.js

• 用法

bootName:"bootstrap.js"接入tns的话入口文件改为bootstrap.js

// bootstrap.js
import('./app')

proxy

用于设置开发阶段的代理服务（生产构建发布无效），基于 http-proxy-middleware 二次开发，可以使用默认参数快速使用，也可以使用原生options参数传入给中间件

• 用法

// 基础使用代理
proxy: [
  {
    // 启用、禁用该条规则
    enable: true,
    // 请求代理服务的消息头
    headers: {
      "Referer": "https://mock.yonyoucloud.com"
    },
    //本地路由代理到远端
    router: [
      '/mock'
    ],
    url: 'https://mock.yonyoucloud.com'
  }
]

启动调试服务后，本机开启：http://127.0.0.1:3000/mock 代理服务。例如访问：http://127.0.0.1:3000/mock/843/basic 服务，代理会访问对方的主机服务为：https://mock.yonyoucloud.com/mock/843/basic

// 使用pathRewrite来改写我们请求的代理路由
proxy: [
  {
    // 启用、禁用该条规则
    enable: true,
    // 请求代理服务的消息头
    headers: {
      "Referer": "https://mock.yonyoucloud.com"
    },
    pathRewrite: {
      '^/mock/api' : '/new/api'
    },
    //本地路由代理到远端
    router: [
      '/mock'
    ],
    url: 'https://mock.yonyoucloud.com'
  }
]

可以看出，增加pathRewrite字段，key代表是我们本地要访问的代理路由，value是远端服务器被解析转换的路由，这样当我们访问了http://127.0.0.1:3000/mock/api/842/action后，会被解析为https://mock.yonyoucloud.com/new/api/842/action

publicPath

指定资源文件引用的目录，打包目录上下文

• 示例1

publicPath："iuap-ypr/ucf-wh"

图片路径：module.exports = "/iuap-ypr/ucf-wh/assets/images/ds.db271945.png";
图标字体路径：module.exports = "/iuap-ypr/ucf-wh/assets/images/icon.fdafasd.woff";

context

脚手架输出的上下文字段

publicPath："iuap-ypr/ucf-wh"


打包路径:/ucf-publish/iuap-ypr/ucf-wh/demo1/index.js

templateType

入口文件的类型，默认为html，如果为html类型可以不传

• 用法：

template:ejs

global_env

项目内全局环境变量

• 用法

global_env: {
  'process.env': {
    'NODE_ENV': JSON.stringify(env),
  },
  'process.env.STATIC_HTTP_PATH': env == 'development' ? JSON.stringify("/static") : JSON.stringify("../static"),
  'FE_ENV': JSON.stringify(env),
},

alias

项目别名

• 用法

// 实例用法
alias: {
  "baseui": path.resolve(__dirname, 'ucf-common/src/baseui/'),
   module: path.resolve(__dirname, 'ucf-common/src/module'),
},

extensions

内置以下后缀名

[".ts", ".tsx", ".jsx", ".js", ".less", ".css", ".json",]

• 用法

extensions : []

externals

• 用法

//实例用法
externals: {
    "tinper-bee": "TinperBee",
},

• 开启tns：默认内置react、react-dom、@tinper/next-ui，如果只有这三个配置可以不配置

//开启tns
externals: {
    "tinper-bee": "TinperBee",
},
      
上方等同于下面

externals: {
    "tinper-bee": "TinperBee",
     react: "React",
    "react-dom": "ReactDOM",
    "@tinper/next-ui": "TinperNext",
},

limit

打包图片图标的限制文件大小，如果不传limit，默认为limit：8196

• 数字参数

limit : 8196

• 对象参数

limit:{img: 8196, icon: 8196}limit = 8196 <=> limit = { img: 8196, icon: 8196 }

hash

构建模式下，打包文件添加文件指纹；打包的css或者js会添加hash值

• 数字参数

hash : 8

• 对象参数

limit:{js: 5, css: 9}

构建结果示例

988.b910d.js
188.b910dafc6.css

hash : 8 <=> hash : { js: 8, css: 8 }

devtool

webpack的devtool参数开发模式默认为source-map生产模式为false

• 用法

devtool:"source-map"

static

静态http服务，用作本地不参与import加载的资源使用，类似webpack-dev-server里的contentBase，仅仅用于开发调试，请使用正确导入资源使用

• 用法

static: "ucf-common/src/static"

scan_root

自定义文件夹作为扫描微应用入口，原则上是按照./自定义目录/*/src/app.js扫描

• 用法

scan_root："ucf-apps"

dist_root

输出自定义文件夹，默认为ucf-publish

• 用法

dist_root: "ucf-publish"

host

自定义IP、域名启动，默认为'127.0.0.1'

• 用法

host:"127.0.0.1"

tnsCfg

接入tns的参数ucf-script接入

• UCF内置tns 插件，需要用户在tnsCfg指定 插件配置（详见tnsCfg）
• UCF内置原默认入口app.js, 需用户指定配置bootName并新建统一的入口名称、以及内容(多入口及在每个app.js同级目录创建新的入口文件，内容均为 import('./app'); );
• externals 需要在模板中手动使用外链的react reactDom Tinper

详细见文档https://yundoc.yonyou.com/view/l/ttu798w

webpackConfig

最后执行，复写定制最终的webpack配置

• 用法

需要修改output参数

webpackConfig(Config){
  Config.output.libraryTarget = "umd";
  Config.output.globalObject = "window";
  return Config
}

presetConfig

特征开关配置,默认全部开启。（只有特征值设置为false才不生效）PS：ucf-scripts内置了一套默认的loader处理，如果不满足个性化需求，可以将内置的loader处理关闭，传入新的处理loader。用法

presetConfig : {
  //默认全部开启
  less:true
  css:true,
  ts:true，
  img:true,
  icon:true,
  babel:true
}

• css特征项

作用：匹配.css结尾的文件不会通过loader处理

//下方loader将失效
{
    test: /\.css$/,
    type: "javascript/auto",
    use: [
        //......
    ],
},

• less特征项

作用：匹配.less结尾的文件不会通过loader处理，less不会编译为css

//下方loader将失效
{
    test: /\.less$/,
    type: "javascript/auto",
    use: [
       ......
    ],
},

• ts特征项

作用：匹配.ts(x)结尾的文件不会通过loader处理，ts不会编译为js

{
    test: /\.m?jsx?$/,
    include: [...defaultLoaderOptions.babelInclude, path.resolve(".", scan_root)],
    use: [
      .......
    ],
},

• babel特征项

作用：匹配.(ts|js)x结尾的文件不会通过loader处理

//下方loader将失效
{
    test: /\.m?(ts|js)x?$/,
    include: [...defaultLoaderOptions.babelInclude, path.resolve(".", scan_root)],
    use: [defaultLoaderOptions.babelLoader],
},

• img特征项

作用：取消对图片的处理

//下方loader将失效
{
    test: /\.(png|jpg|jpeg|gif)(\?.+)?$/,
    type: "javascript/auto",
    use: [
        ......
    ],
}

• icon特征项

作用：取消对图片的处理

//下方loader将失效
{
    test: /\.(woff|woff2|eot|ttf|svg|svgz|otf)$/,
    use: [
       .......
    ],
    type: "javascript/auto",
},

ruleConfig

对ucf-scripts内置默认的rules做修改，目前内置5种rules，如有个性化需求可以自定义修改。

• 用法1 扩展配置（推荐）

//示例
ruleConfig(defaultRulesOptions) {
    defaultRulesOptions.css.exclude = /node_modules[\\|\/]@tinper/
    return defaultRulesOptions;
}

• 用法2 复写配置-示例

//复写对内置css的rule配置-示例
ruleConfig:{
  css:{
    test: /\.css$/,
    type: "javascript/auto",
    use: [
        "style-loader",
        "css-loader",
        "postcss-loader"
    ],
  }
}

ruleConfig默认内置配置

• css配置项

css: {
    test: /\.css$/,
    type: "javascript/auto",
    use: [
        //styleLoader
        //cssLoader
        //postcssLoader
        //具体可参见loaderConfig的styleLoader、cssLoader、postcssLoader配置项
    ],
},

• babel配置项

babel: {
    test: /\.m?(ts|js)x?$/,
    include: [
        path.resolve(".", "ucf-common"),
        path.resolve(".", scan_root),
        path.resolve(".", "node_modules/ansi-regex"),
        path.resolve(".", "node_modules/strip-ansi"),
        path.resolve(".", "node_modules/ucf-scripts"),
        path.resolve(".", "node_modules/query-string"),
        path.resolve(".", "node_modules/split-on-first"),
        path.resolve(".", "node_modules/strict-uri-encode"),
    ],
    use: [
       //babelLoader
      //具体可参见loaderConfig的babelLoader配置项
    ],
},

• less配置项

less: {
    test: /\.less$/,
    type: "javascript/auto",
    use: [
        //styleLoader
        //cssLoader
        //postcssLoader
        //lessLoader
        //具体可参见loaderConfig的styleLoader、cssLoader、postcssLoader、lessLoader配置项
    ],
},

• icon配置项

icon: {
    test: /\.(woff|woff2|eot|ttf|svg|svgz|otf)$/,
    use: [
        //urlLoader
        //具体可参见loaderConfig的urlLoader配置项
    ],
    type: "javascript/auto",
},

• img配置项

img: {
    test: /\.(png|jpg|jpeg|gif)(\?.+)?$/,
    type: "javascript/auto",
    use: [
        //urlLoader
        //具体可参见loaderConfig的urlLoader配置项
    ],
},

loaderConfig

loader的配置

• 用法1，扩展配置(推荐)

loaderConfig(defaultLoaderOptions) {
    //添加loader
    defaultLoaderOptions.loaders = [
        {
            test: /\.ejs$/,
            use: [
                {
                    loader: "ejs-compiled-loader",
                    options: {
                        compileDebug: true,
                    },
                },
            ],
        },
    ];
    return defaultLoaderOptions;
},

• 用法2，复写配置

loaderConfig : {
    loaders: [],
};

loaderConfig默认配置

• styleLoader

styleLoader: {
    loader: require("mini-css-extract-plugin").loader,
    options: {
        publicPath: "./",
    },
},

• cssLoader

cssLoader: {
    loader: require.resolve("css-loader"),
    options: {
        esModule: false, //禁用 ES 模块语法
        modules: false, //禁用 CSS 模块
    },
},

• lessLoader

lessLoader: {
    loader: require.resolve("less-loader"),
    options: {},
},

• urlLoader

urlLoader: {
    loader: require.resolve("url-loader"),
    options: {
        limit: 8196,
        esModule: false,
        name: "[name].[hash:8].[ext]",
        outputPath: "assets/images/",
        publicPath: "/",
    },
},

• babelLoader

 babelLoader: {
    loader: require.resolve("babel-loader"),
    options: {
        babelrc: false,
        sourceType: "unambiguous",
        presets: [
            [
                require.resolve("@babel/preset-env"),
                {
                    targets: {
                        edge: "17",
                        firefox: "60",
                        chrome: "67",
                        safari: "11.1",
                        ie: "10",
                    },
                },
            ],
            "@babel/preset-flow",
            "@babel/preset-react",
            "@babel/preset-typescript",
        ],
        plugins: [
            [
                require.resolve("@babel/plugin-transform-runtime"),
                {
                    corejs: false,
                    helpers: true,
                    regenerator: true,
                    useESModules: false,
                },
            ],
            [
                require.resolve("babel-plugin-dynamic-import-webpack"),
                {
                    helpers: false,
                    polyfill: true,
                    regenerator: true,
                },
            ],
            [
                require.resolve("@babel/plugin-proposal-decorators"),
                {
                    legacy: true,
                },
            ],
            [
                require.resolve("@babel/plugin-proposal-class-properties"),
                {
                    loose: true,
                },
            ],
            [
                require.resolve("@babel/plugin-proposal-private-methods"),
                {
                    loose: true,
                },
            ],
            [
                require.resolve("@babel/plugin-proposal-private-property-in-object"),
                {
                    loose: true,
                },
            ],
            [require.resolve("@babel/plugin-proposal-optional-chaining"), {}, "ucf-changing"], // 支持可选链
            [
                require.resolve("@babel/plugin-proposal-nullish-coalescing-operator"),
                {},
                "ucf-coalescing",
            ], // 支持双问号
            require.resolve("@babel/plugin-proposal-object-rest-spread"),
        ],
    },
},

• postcssLoader

postcssLoader: {
    loader: require.resolve("postcss-loader"),
    options: {
        postcssOptions: {
            plugins: [
                require("autoprefixer")({
                    overrideBrowserslist: [
                        "last 2 Chrome versions",
                        "last 2 Firefox versions",
                        "Safari >= 7",
                        "ie > 10",
                    ],
                }),
                require("postcss-flexbugs-fixes"),
                require("postcss-import"),
            ],
        },
    },
},

pluginConfig

• 用法1 - 扩展配置

pluginConfig(defaultPluginOptions) {
    //含有以下配置项
    let { 
      CopyWebpackPlugin, 
      CleanWebpackPlugin, 
      HtmlWebPackPlugin, 
      TerserPlugin,
      CssMinimizerPlugin 
    } = defaultPluginOptions;
  
    defaultPluginOptions.CopyWebpackPlugin = {
      patterns : [
          { from: 'module.xml' },
          { from: 'README.md' }
    	]
    }

    return defaultPluginOptions;
},

• 用法2 - 复写配置

pluginConfig : {
  CopyWebpackPlugin:{}, 
  CleanWebpackPlugin:{}, 
  HtmlWebPackPlugin:{}, 
  TerserPlugin:{},
  CssMinimizerPlugin :{},
  plugins:[]
}

• 区分生产模式或者开发模式plugins

plugins : argv[0] === "build" ? [] : []

• HtmlWebPackPlugin扩展用法

项目为多个微应用入口，如果需要对某个应用入口做HtmlWebPackPlugin的参数调整，可参考下方

// bootItem {
//   moduleName: string; // 微应用入口名称
//   configOption: object; // 微应用 HtmlWebPackPlugin 参数配置
// }

// bootList: BootItem[] 

pluginConfig:{
    HtmlWebPackPlugin:(bootList)=>{
        bootList.forEach(bootItem=>{
            if(bootItem.moduleName === 'ypr'){
                bootItem.configOption.filename = 'index.html'
            }
        })
        return bootList;
    }
}

plugin的默认内置配置

const defaultPluginOptions = {
    CopyWebpackPlugin: {
      
    },
    CleanWebpackPlugin: {},
    HtmlWebPackPlugin: {
      //ypr：代表一个微应用入口
       filename: `ypr/index.html`,
        template: './ucf-apps/ypr/src/index.html',
        inject: "body",
        chunks: isProd ? ["vendor", 'ypr'] : ['ypr'],
        hash: true,
        static_url: static_url ? static_url : "",
    },
    TerserPlugin: {
        parallel: true,
    },
    CssMinimizerPlugin: {
        minimizerOptions: {
            mergeLonghand: false,
            discardComments: { removeAll: true },
        },
    },
    plugins: [],
};

配置生命周期说明

v2升级v3

命令升级

内置升级命令，执行以下命令可自动升级ucf.config.js文件升级会生成一份临时配置文件备份，升级完成可删除该文件。

ucf-scripts update
或
npx ucf-scripts update

PS：出现以下情况，请手动调整。1.升级脚本执行报错。2.升级之后，ucf.config.js不符合规范，部分参数调整有问题。

废弃API兼容

3.0版本对之前的参数进行整合，以下参数配置不再支持，可通过扩展配置处理兼容。

| 配置项 | 说明 | | --- | --- | | hasHash | js文件打包添加hash | | context | 上下文 | | open_source_map | 构建资源生产环境的时候产出sourceMap | | res_extra | 是否展开静态引用资源，用于打包处理字体、图片等资源产出，或者不使用展开资源会打包到css方便管理 | | css， | css loader的options | | less | less loader的options | | postcss_plugins | PostCssPlugin | | babel_include | babel使用的 incluede | | babel_presets | babel使用的 presets | | babel_plugins | babel的插件 | | loader | 内置加载器无法处理需要单独去设置处理 | | devPlugins | 开发环境加载的插件 | | buildPlugins | 生产环境加载的插件 | | HtmlPluginConf | HtmlWebPackPlugin插件的配置 |

hasHash

V3版本新增API：hash，可以替代

hash:8

context

由publicPath替代

publicPath:'iuap-ypr/ucf-wh'

open_source_map

V3版本新增API：devtool，可以替代

devtool:'source-map'

res_extra

直接废弃，可以不用调整

css

• 原用法

css:{
  modules: false,
  esModule: false,
}

• 升级之后用法：可以使用loaderConfig来调整

loaderConfig(defaultLoaderOptions){
  let options = defaultLoaderOptions.cssLoader.options
  defaultLoaderOptions.cssLoader.options = {
    ...options,
    modules: false,
    esModule: false,
  }
  return defaultLoaderOptions
}

less

• 原用法

less:{
  modules: false,
}

• 升级之后用法：可以使用loaderConfig来调整

loaderConfig(defaultLoaderOptions){
  let options = defaultLoaderOptions.lessLoader.options
  defaultLoaderOptions.lessLoader.options = {
    ...options,
    modules: false,
  }
  return defaultLoaderOptions
}

postcss_plugins

• 原用法

postcss_plugins:[require("postcss-flexbugs-fixes")]

• 升级之后用法：可以使用loaderConfig来调整

loaderConfig(defaultLoaderOptions) {
  let { postcssOptions } = defaultLoaderOptions.postcssLoader.options;
  const userOpts = [require("postcss-flexbugs-fixes")];
  postcssOptions.plugins = postcssOptions.plugins.concat(userOpts);
  defaultLoaderOptions.postcssLoader.options.postcssOptions = postcssOptions;
  return defaultLoaderOptions;
}

babel_include

• 原用法

babel_include:[path.resolve(".", "ucf-apps"),]

• 升级之后用法：可以使用loaderConfig来调整

ruleConfig(defaultRulesOptions) {
		const { include: babelInclude } = defaultRulesOptions.babel;
    const userOpts = [path.resolve(".", "ucf-apps")];
    defaultRulesOptions.babel.include = babelInclude.concat(userOpts);
    return defaultRulesOptions;
}

babel_presets

• 原用法

babel_presets:["@babel/preset-typescript"];

• 升级之后用法：可以使用loaderConfig来调整

loaderConfig(defaultLoaderOptions) {
  const userOpts = ["@babel/preset-typescript"];
  const { presets } = defaultLoaderOptions.babelLoader.options;
  const newPresets = presets.concat(userOpts);
  defaultLoaderOptions.babelLoader.options.presets = newPresets;
  return defaultLoaderOptions;
}

babel_plugins

• 原用法

babel_plugins:[
			"@babel/plugin-proposal-optional-chaining"
],

• 升级之后用法：可以使用loaderConfig来调整

loaderConfig(defaultLoaderOptions) {
  let { options } = defaultLoaderOptions.babelLoader;
  const userOpts = ["@babel/plugin-proposal-optional-chaining"];
  options.plugins = options.plugins.concat(userOpts);
  defaultLoaderOptions.babelLoader.options.plugins = options.plugins;
  return defaultLoaderOptions;
}

loader

• 原用法

loaders: [
    {
        test: /\.ejs$/,
        use: [
            {
                loader: "ejs-compiled-loader",
                options: {
                    compileDebug: true,
                },
            },
        ],
    },
],

• 升级之后用法：可以使用loaderConfig来调整

//方式一
loaderConfig: {
    loaders: [
        {
            test: /\.ejs$/,
            use: [
                {
                    loader: "ejs-compiled-loader",
                    options: {
                        compileDebug: true,
                    },
                },
            ],
        },
    ],
},


//方式二
loaderConfig(defaultPluginOptions) {
    defaultPluginOptions.loaders = [
        {
            test: /\.ejs$/,
            use: [
                {
                    loader: "ejs-compiled-loader",
                    options: {
                        compileDebug: true,
                    },
                },
            ],
        },
    ]
   return defaultPluginOptions
},

buildPlugins、devPlugins

• 原用法

// 调试服务需要运行的插件
devPlugins: [
  new BundleAnalyzerPlugin()
],
// 构建服务需要运行的插件
buildPlugins: [
  new BPlugin()
],

• 升级之后用法：可以使用pluginConfig来调整

pluginConfig: {
    plugins : argv[0] === "build" ? 
            [new BPlugin()] :  [new BundleAnalyzerPlugin()]
},

HtmlPluginConf

• 原用法

HtmlPluginConf:{
   filename: "index.html",
}

• 升级之后用法：可以使用pluginConfig来调整

pluginConfig(defaultPluginOptions) {
    defaultPluginOptions.HtmlWebPackPlugin.filename = "index.html"
    return defaultPluginOptions;
},

升级出现问题

1.如果有一些配置，是通过变量或者其他文件引入的例如下面这种情况

const context = 'iuap/ypr'
module.exports = (env, argv) => {
    return {
        context,
      ......
    }

建议

• 手动改成context:"iuap-ypr"，键值对方式，要不升级匹配规则会有问题
• 或者删除该配置项，手动按照文档修改

版本

• 2.0.0-beta.15 内部放弃使用 optimize-css-assets-webpack-plugin 变更为css-minimizer-webpack-plugin 打包css
• 2.0.0-beta.13 增加 对于typescript 的支持
• 2.0.0-beta.12 增加 extensions 参数用于支持扩展extensions
• 2.0.0-beta.11 babel 增加同时使用esm和commonjs的兼容性， 兼容ie11；支持参数babel_include 为function类型
• 2.0.0-beta.8 css 编译 排除 less-loader
• 2.0.0-beta.7 tns 内置 libraryEnv 默认值
• 2.0.0-beta.6 支持开发模式支持https启动服务
• 2.0.0-beta.5 tns 部分文档更新, tns 包升级
• 2.0.0-beta.4 tns 部分文档更新, fix bug
• 2.0.0-beta.3 接入tns系统
• 2.0.0-beta.2 修复背景图片以及一些字体打包问题
• 2.0.0-beta.1 修复内部包 不能被外部全部直接下载问题，修复postcss 警告
• 2.0.0-beta.0 内置webpack5
• 1.2.8 增加limit参数，用于设置静态资源大于多少后进行base64转码
• 1.2.7 修复启动端口冲突的问题
• 1.2.6 增加less配置参数
• 1.2.5 增加publicPath={boolen}字段，用于解决需要进行按需加载优化的项目，开启该配置后 项目中资源依赖路径将使用 context 字段作为资源依赖公共路径，并且路径依赖由原来的相对路径变为 /开头的绝对路径
• 1.2.4 支持Less-Loader的JavaScript
• 1.2.3 增加 postcss_plugins 参数用于支持扩展PostCss Loader的插件机制
• 1.2.2 解决在使用了context后，静态资源地址不正确的问题以及静态资源根据开发环境不同加载对应的脚本
• 1.2.1 支持自定义域名、IP绑定参数host、对应文档更新
• 1.2.0 实现splitChunks参数暴露、版本号锁定
• 1.1.9 解决启动autoprefixer红色警告的问题
• 1.1.8 显示文件名和构建时间&新特性实现多级构建源码目录
• 1.1.7 修复启动或构建执行三次配置文件的问题，修复第一次传递错误环境参数值
• 1.1.6 增加自定义入口扫描scan_root、自定义输出目录dist_root
• 1.1.5 支持babel的presets、plugin参数，更新对应使用文档，ucf.config增加babel_presets、babel_plugins
• 1.1.4 升级clean-webpack-plugin、get-port，去除压缩插件uglifyjs-webpack-plugin使用内置压缩插件terser-webpack-plugin
• 1.1.3 解决res_extra参数的差异化，现在不管是development还是production都是一致的路径
• 1.1.2 完善res_extra:true性能优化，只针对构建上线打包的时候生效，拆分公共vendor、js、css
• 1.1.1 修复静态服务没有设置的错误
• 1.1.0 增加调试和打包的静态依赖资源展开参数res_extra,增加静态服务功能参数static
• 1.0.9 修复context不设置构建的时候没有html文件的问题
• 1.0.8 增加context参数
• 1.0.7 调整参数变化、输出目录调整ucf-publish、自动清理构建目录
• 1.0.6 增加portal平台开发环境支持
• 1.0.5 增加对CSS Loader配置支持
• 1.0.4 增加CSS Modules支持、自动打开浏览器命令行--homepage
• 1.0.3 增加注解支持
• 1.0.2 增加SourceMap参数支持
• 1.0.1 切换正式环境
• 1.0.0 完善开发服务、精简配置、容错处理
• 0.0.x 初步完成开发调试、构建、代理访问