打包發布：讓組件庫支持按需加載

支持按需加載需要滿足：

• 組件庫以 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
    }
}