feat(build): 打包es module 规范模块

Author: zhaozhiwen

.babelrc.js

@@ -1,13 +1,38 @@
 module.exports = {
-  presets: ['@babel/env', '@babel/typescript', '@babel/react'],
-  plugins: [
-    '@babel/proposal-class-properties',
-    [
-      '@babel/plugin-transform-runtime',
-      {
-        corejs: 3,
-        helpers: true,
-      },
-    ],
-  ],
+  presets: ['@babel/typescript', '@babel/react'],
+  plugins: ['@babel/proposal-class-properties'],
+  env: {
+    CJS: {
+      presets: [['@babel/env']],
+      plugins: [
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            corejs: 3,
+            helpers: true,
+          },
+        ],
+      ],
+    },
+    ESM: {
+      presets: [
+        [
+          '@babel/env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+      plugins: [
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            corejs: 3,
+            helpers: true,
+            useESModules: true,
+          },
+        ],
+      ],
+    },
+  },
 };

gulpfile.js

@@ -11,15 +11,39 @@ const paths = {
   scripts: ['components/**/*.{ts,tsx}', '!components/**/demo/*.{ts,tsx}'],
 };
 
-function compileCJS() {
-  const { dest, scripts } = paths;
+/**
+ * 编译脚本文件
+ * @param {*} babelEnv babel环境变量
+ * @param {*} destDir 目标目录
+ */
+function compileScripts(babelEnv, destDir) {
+  const { scripts } = paths;
+  process.env.BABEL_ENV = babelEnv;
   return gulp
     .src(scripts)
     .pipe(babel()) // 使用gulp-babel处理
-    .pipe(gulp.dest(dest.lib));
+    .pipe(gulp.dest(destDir));
+}
+
+/**
+ * 编译cjs
+ */
+function compileCJS() {
+  const { dest } = paths;
+  return compileScripts('CJS', dest.lib);
 }
 
-const build = gulp.parallel(compileCJS);
+/**
+ * 编译esm
+ */
+function compileESM() {
+  const { dest } = paths;
+  return compileScripts('ESM', dest.esm);
+}
+
+const buildScripts = gulp.series(compileCJS, compileESM);
+
+const build = gulp.parallel(buildScripts);
 
 exports.build = build;
 

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "typings": "types/index.d.ts",
   "main": "lib/index.js",
+  "module": "esm/index.js",
   "scripts": {
     "dev": "docz dev",
     "start": "npm run dev",