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 文件夹