sd-build-plus
优点:
- [x] 可靠!目前单元测试覆盖率超越 70%,后续会继续增加覆盖率
- [x] 方便开发:一行命令启动 react + less 业务项目
- [x] 方便打包: 一行命令打包 react 业务项目,webpack5 打包,无需关注 webpack 配置和优化,我们帮你做了
- [x] 方便打包: 一行命令打包 react 组件库,打包方式等同 antdesign
- [x] 方便测试: 一行命令自动测试除了 node_modules 下,其他所有test目录的 js|jsx|ts|tsx 文件
- [x] 质量棒棒哒!整体代码质量较高(大部分代码符合 solid 原则),易于维护
使用
Install
pnpm add -D sd-build-plus
Usage
mx buildLib [options] 打包编译react组件库
mx dev [options] 运行开发环境
mx buildSite [options] 打包编译web项目
mx test [options] 测试react项目
mx --help 查看帮助信息
mx --version 查看版本信息
详细命令如下
package.json
scripts 钩子
For example:
{
"scripts": {
"start": "mx dev env=sat -h https",
"build:types": "rimraf types && tsc --outDir types -d --emitDeclarationOnly",
"build:es": "rimraf esm && mx buildLib --mode esm --entry-dir ./components --less-2-css --copy-less",
"build:cjs": "rimraf lib && mx buildLib --mode cjs --entry-dir ./components --less-2-css --copy-less",
"build:umd": "rimraf dist && mx buildLib --mode umd --entry ./components/index",
"build": "yarn build:types && yarn build:cjs && yarn build:es && yarn build:umd",
"buildSite": "mx buildSite",
"buildLibHelp": "mx help buildLib",
"buildSiteHelp": "mx help buildSite",
"testHelp": "mx help test",
"devHelp": "mx help dev"
},
"devDependencies": {
"sd-build-plus": "^1.0.0"
}
}
自定义配置
读取你在根目录的 mx.config.js
文件,案例如下:
// mx.config.js
const path = require('path');
module.exports = {
// 自定义入口文件,必填
entries: {
index: {
entry: ['./src/index.js'],
template: './public/index.html',
favicon: './favicon.ico',
},
// 别名配置,可省略
resolve: {
alias: {
'@': path.join(process.cwd(), '/'),
},
},
// 加入自定义Babel插件
setBabelOptions: (options) => {
options.plugins.push([
'prismjs',
{
languages: ['javascript', 'typescript', 'jsx', 'tsx', 'css', 'scss', 'markup', 'bash'],
theme: 'default',
css: true,
},
]);
},
// 加入自定义loader
setRules: (rules) => {
rules.push({
test: /\.md$/,
use: ['raw-loader'],
});
},
};
案例
查看 example 文件夹