打包发布：让组件库支持按需加载

支持按需加载需要满足：

• 组件库以 es6 模块化方式导出
• package.json 中 sideEffects:false
• 宿主项目中引用方式写法到位或引入 babel-plugin-import
• 宿主项目通过 webpack 打包支持 tree-shacking

好了，对于组件库项目，关键就是 以 es6 模块导出

---

webpack umd 形式导出，打包出来的东西才能供别人使用

// webapack.config
output: {
  library: 'xmh',
  libraryTarget: 'umd'
}

但是是整体定义成一个模块，不能支持按需加载

---

webpack 不行，直接用 babel 来编译吧，用 gulp 来组织工作流。

babel 配置要注意的，两处：

• @babel/preset-env 中 modules:false，也就是不要让 babel 对 es module 模块化语法进行编译，不然就编译成 es5 的了
• @babel/plugin-transform-runtime 中，useESModule:true，也就是使用 es module 形式的 helper
• 以上两处配置要单独配到一个 env 里，比如 BABEL_ENV = esm，因为项目中使用了 jest , jest 也要用到 babel 但它不支持 es 模块。

---

另外：
.d.ts 的生成
css 的生成

---

附上代码：

// .babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage", // usage 会根据配置的浏览器兼容，以及代码中用到的 API 来进行 polyfill，实现了按需添加
                "corejs": 2 // 2 或 3 表示引入不污染全局的 polyfill,搭配 @babel/runtime-corejs2 或 @babel/runtime-corejs3；false 或者不设置，则表示全局引入，会覆盖原有全局变量
            }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": ["@babel/plugin-transform-runtime"],
    "env": {
        "esm": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "modules": false // 不进行 es6 模块编译，保持 es6 模块方式以支持 tree-shacking
                    }
                ]
            ],
            "plugins": [
                [
                    "@babel/plugin-transform-runtime",
                    {
                        "useESModules": true // 使用 esm 形式的 helper
                    }
                ]
            ]
        }
    }
}

// gulpfile.js

const gulp = require('gulp');
const replace = require('gulp-replace');
const babel = require('gulp-babel');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');

const paths = {
    dest: {
        es: 'es',
        style: 'style'
    },
    styles: 'components/index.scss',
    scripts: [
        'components/**/*.{ts,tsx}',
        '!components/**/__test__/**/*',
        '!components/**/demo/**/*'
    ]
};

function compileESM() {
    const { dest, scripts } = paths;
    return gulp
        .src(scripts)
        .pipe(replace('$prefix', 'xmh'))
        .pipe(babel())
        .pipe(gulp.dest(dest.es));
}

function compileSCSS() {
    const { dest, styles } = paths;
    return gulp
        .src(styles)
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(
            cssnano({
                zindex: false,
                reduceIdents: false
            })
        )
        .pipe(gulp.dest(dest.style));
}

const build = gulp.parallel(compileESM, compileSCSS);

exports.build = build;
exports.default = build;

// package.json 部分

{
    "main": "dist/xmh-ui.js",
    "module": "es/index",
    "typings": "dist/types/index.d.ts",
    "scripts": {
        "build": "rimraf dist es style && run-s build:*",
        "build:umd": "webpack --config ./build/webpack.prod.config.js",
        "build:esm": "cross-env BABEL_ENV=esm gulp",
        "build:types": "rimraf dist/types && tsc -p tsconfig.build.json && cpr dist/types es"
    },
    "sideEffects": false
}

// tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "module": "esnext",
        "jsx": "react",
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "moduleResolution": "node",
        "baseUrl": "./",
        "paths": {
            "@components/*": ["./components/*"]
        },
        "removeComments": true,
        "declaration": true,
        "declarationDir": "dist/types",
        "emitDeclarationOnly": false,
        "watch": true
    },
    "include": ["./components/**/*", "./example/**/*"]
}

// tsconfig.build.json

{
    "extends": "./tsconfig.json",
    "include": ["./components/**/*"],
    "exclude": ["**/__test__/**/*", "**/demo/**/*"],
    "compilerOptions": {
        "emitDeclarationOnly": true,
        "watch": false
    }
}