@ecoding/base.build
v0.2.18
Published
tpl building
Downloads
99
Readme
// 工程通用打包配置
@ecoding/base.build
简单快速配置 abc.js
{
mpa: boolean; // 是否是多页
dll:boolean; // 是否打dll
micro:"main" | "child"; // 微前端主应用或子应用 默认null
electron: boolean; // electron 是否是electron
outputLibrary: string; // micro == child时生效,整个库向外暴露的变量名
publicPath: string; // client cdn 资源前缀
outputPath: string; // client build bundle 目录,相对命令执行目录
runtimeChunk: bool; // 是否在html里内联webpack-runtime
noClear: bool; // 是否使用 CleanWebpackPlugin, 默认false
externals: object;
/* externals
{
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"electron": true,
};
*/
dev:{
publicPath: string; // devserver 读这个
port: number, // devserver 端口 默认 8080
// https 支持
https: {
key: fs.readFileSync(path.join(__dirname, "./local.cxc.tech-key.pem")),
cert: fs.readFileSync(path.join(__dirname, "./local.cxc.tech.pem"))
}
},
ssr: {
outputPath: string; // ssr build bundle 目录,相对命令执行目录
}
}
注意:
内部已经支持了 sass 和 less 配置,默认 less,如果想要使用 sass,还需额外安装:
# "node-sass": "^7.0.3",
# "sass-loader": "^13.1.0",
npm i sass-loader node-sass -D --registry http://r.cnpmjs.org
# 或
npm i sass-loader node-sass -D --registry https://registry.npm.taobao.org
复杂自定义打包配置
在工程下新建 build.js,return webpack 的配置即可,注意完全按照 webpack 配置规则,框架无做任何干涉
module.exports = {
externals: {
react: "var window.React",
moment: "var window.moment",
lodash: "var window._",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes"
}
};
Usage
{
"@babel/core": "7.18.5", // babel
"@babel/plugin-proposal-class-properties": "7.17.12", // 会将类中的属性编译,支持私有属性
"@babel/plugin-proposal-decorators": "7.18.2", // 插件会支持类的装饰器语法, 包括类装饰器, 属性装饰器, 方法装饰器, tsconfig.json -> "experimentalDecorators": true,
"@babel/plugin-proposal-private-methods": "7.17.12", // 会将类中的方法编译,支持私有方法
"@babel/plugin-proposal-private-property-in-object": "7.17.12",
"@babel/plugin-transform-runtime": "7.18.5", // babel 运行时工具集合
"@babel/preset-env": "7.18.2", // babel插件集合
"@babel/preset-react": "7.17.12", // babel 支持 react 插件
"@babel/preset-typescript": "7.17.12", // babel 支持 typescript 插件
"@ecoding/base.mock": "0.*", // 自己写的mock插件
"@ecoding/base.spec": "*",
"@svgr/webpack": "6.2.1", // webpack svg 插件
"@typescript-eslint/eslint-plugin": "5.28.0", // eslint ts 插件
"@typescript-eslint/parser": "5.28.0", // eslint ts 编译器
"add-asset-html-webpack-plugin": "5.0.2", // 将某个文件打包输出到build目录下,并在html中自动引入该资源
"autoprefixer": "10.4.7", // 可以自动在样式中添加浏览器厂商前,是postcss插件
"babel-eslint": "10.1.0",
"babel-loader": "8.2.5",
"clean-webpack-plugin": "^4.0.0",
"concurrently": "^7.3.0", // 并行执行node 命令
"core-js": "3.23.1",
"cross-env": "7.0.3",
"css-loader": "6.7.1",
"css-minimizer-webpack-plugin": "4.0.0",
"eslint": "8.18.0",
"globby": "^11.0.2",
"html-webpack-plugin": "5.5.0", // html 模版插件
"inline-chunk-html-plugin": "1.1.1", // 内联 webpack runtime 代码
"less": "4.1.3",
"less-loader": "11.0.0",
"mini-css-extract-plugin": "2.6.1", // css压缩
"postcss-loader": "7.0.0", // css向下兼容
"rimraf": "^3.0.2",
"style-loader": "3.3.1", // 编译 style 内联css
"terser-webpack-plugin": "5.3.3", // js压缩
"typescript": "4.8.3",
"webpack": "5.73.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.9.2",
"webpack-merge": "5.8.0",
"webpack-node-externals": "^3.0.0", // 打包ssr时用
"webpackbar": "5.0.2"
}