fix: gulp to complier (#113)

* refactor: gulp packaging process update

* chore: add esm folder to git ignore

* chore: babel plugin format correction

* build: adjust typescript config to support both module

* build: add script to support esm and lib

* fix: babel plugin code execution order

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 storybook-static
 lib
+esm
 dist
 .temporary_files
 coverage

css-plugin.js

@@ -1,15 +1,21 @@
-const t = require('@babel/types');
-module.exports = function() {
+const type = require('@babel/types');
+
+module.exports = function () {
   return {
     visitor: {
       ImportDeclaration(path) {
         const { node } = path;
+
         if (!node) return;
+
         const {
           source: { value: libName },
         } = node;
+
         if (libName === './style.scss') {
-          path.replaceWith(t.importDeclaration([], t.stringLiteral('./style.css')));
+          path.replaceWith(
+            type.importDeclaration([], type.stringLiteral('./style.css')),
+          );
         }
       },
     },

gulpfile.js

@@ -9,6 +9,7 @@ const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');
 const babel = require('gulp-babel');
 const mergeStream = require('merge-stream');
+const ENV = process.env.NODE_MODULE_ENV;
 
 /**
  * existStyleCatalogName ---- The name of the component catalog where the style exists
@@ -21,7 +22,7 @@ const folderName = '.temporary_files';
 const basePath = 'src/components/';
 
 function difference(array, arrCompare) {
-  return array.concat(arrCompare).filter(function(v, i, arr) {
+  return array.concat(arrCompare).filter(function (v, i, arr) {
     return arr.indexOf(v) === arr.lastIndexOf(v);
   });
 }
@@ -31,11 +32,16 @@ function unique(arr) {
 
 function writeStyleFile(catalogArr) {
   for (let catalogName of catalogArr) {
-    fs.writeFile(`${basePath}${catalogName}/style.scss`, '', { flag: 'wx' }, err => {
-      if (err) {
-        throw err;
-      }
-    });
+    fs.writeFile(
+      `${basePath}${catalogName}/style.scss`,
+      '',
+      { flag: 'wx' },
+      (err) => {
+        if (err) {
+          throw err;
+        }
+      },
+    );
   }
 }
 
@@ -51,16 +57,19 @@ function delStyleFile(catalogArr) {
 function traverseExistStyleFile(isDelete) {
   return src([`${basePath}*/*.scss`])
     .pipe(
-      through.obj(function(file, enc, callback) {
+      through.obj(function (file, enc, callback) {
         isExist = Boolean(file.contents.toString());
         if (isExist) {
           existStyleCatalogName.push(file.relative.split('/')[0]);
         }
         callback();
       }),
     )
-    .on('end', async function() {
-      const noStyleComp = difference(unique(componentCatalogName), unique(existStyleCatalogName));
+    .on('end', async function () {
+      const noStyleComp = difference(
+        unique(componentCatalogName),
+        unique(existStyleCatalogName),
+      );
       if (isDelete) {
         delStyleFile(noStyleComp);
         console.log('delStyleFile exec end');
@@ -76,12 +85,12 @@ function traverseComponent() {
   console.warn('Do not edit the source file when the project is compiled !!!');
   return src([`${basePath}*/`, `!${basePath}utils/`]) // exclude utils/
     .pipe(
-      through.obj(function(file, enc, callback) {
+      through.obj(function (file, enc, callback) {
         componentCatalogName.push(file.relative.split('/')[0]);
         callback();
       }),
     )
-    .on('end', function() {
+    .on('end', function () {
       console.log('traverseComponent exec end ~');
     });
 }
@@ -99,17 +108,31 @@ function cleanUselessStyleFile() {
 }
 
 async function descriptionDoc() {
-  await fs.mkdir(folderName, { recursive: false }, err => {
+  await fs.mkdir(folderName, { recursive: false }, (err) => {
     if (err) throw err;
   });
-  await fs.writeFile(`${folderName}/index.tsx`, `import './style.scss';`, { flag: 'w' }, err => {
-    if (err) {
-      throw err;
-    }
-    console.log(`Do not delete the ${folderName} until the compilation is complete`);
-  });
+  await fs.writeFile(
+    `${folderName}/index.tsx`,
+    `import './style.scss';`,
+    { flag: 'w' },
+    (err) => {
+      if (err) {
+        throw err;
+      }
+      console.log(
+        `Do not delete the ${folderName} until the compilation is complete`,
+      );
+    },
+  );
   return src(`${folderName}/index.tsx`)
-    .pipe(ts({ declaration: true, target: 'ES5' }))
+    .pipe(
+      ts({
+        declaration: true,
+        target: 'ES5',
+        module: ENV === 'esm' ? 'es6' : 'commonjs',
+        skipLibCheck: true,
+      }),
+    )
     .pipe(dest(`${folderName}/`));
 }
 
@@ -118,7 +141,7 @@ function outputStyleTask(componentCatalogName) {
     Object.prototype.toString.call(componentCatalogName) !== '[Object Array]' &&
     componentCatalogName.length !== 0
   ) {
-    componentCatalogName.map(componentName => {
+    componentCatalogName.map((componentName) => {
       convertStyles(componentName);
     });
     return Promise.resolve('Components style file output completed');
@@ -129,51 +152,52 @@ function outputStyleTask(componentCatalogName) {
 function globalSass() {
   return src(`${basePath}**/*.scss`)
     .pipe(concat('index.scss'))
-    .pipe(dest('lib/style'));
+    .pipe(dest(ENV + '/style'));
 }
 
 async function clean(cb) {
   await cleanUselessStyleFile();
-  await del(['lib', '.temporary_files']);
+  await del([ENV, '.temporary_files']);
   await cb();
 }
 
 function globalCss() {
   del(folderName);
-  return src('lib/**/*.scss')
+  return src(ENV + '/**/*.scss')
     .pipe(concat('index.css'))
     .pipe(sass())
     .on('error', sass.logError)
     .pipe(cleanCSS({ compatibility: 'ie11' }))
-    .pipe(dest('lib/style'));
+    .pipe(dest(ENV + '/style'));
 }
 
 function convertStyles(data) {
   return mergeStream(
     outputForCss(data),
-    outputForSaSS(data,'index.js'),
-    outputForSaSS(data,'index.d.ts'),
-    outputForCssFile(data)
+    outputForSaSS(data, 'index.js'),
+    outputForSaSS(data, 'index.d.ts'),
+    outputForCssFile(data),
   );
 }
 
-function outputForSaSS(data, fileName){
-  return src(`${folderName}/${fileName}`)
-    .pipe(dest('lib/' + String(data) + '/style/'))
+function outputForSaSS(data, fileName) {
+  return src(`${folderName}/${fileName}`).pipe(
+    dest(ENV + '/' + String(data) + '/style/'),
+  );
 }
 
-function outputForCssFile(data){
+function outputForCssFile(data) {
   return src(`${folderName}/index.tsx`)
-  .pipe(rename('css.tsx'))
-  .pipe(babel())
-  .pipe(dest('lib/' + String(data) + '/style/'))
+    .pipe(rename('css.tsx'))
+    .pipe(babel())
+    .pipe(dest(ENV + '/' + String(data) + '/style/'));
 }
 
 function outputForCss(data) {
   return src([`${basePath}` + String(data) + '/*.scss'])
-  .pipe(dest('lib/' + String(data) + '/style/'))
-  .pipe(sass())
-  .pipe(dest('lib/' + String(data) + '/style/'))
+    .pipe(dest(ENV + '/' + String(data) + '/style/'))
+    .pipe(sass())
+    .pipe(dest(ENV + '/' + String(data) + '/style/'));
 }
 
 exports.default = series(

package.json

@@ -4,15 +4,18 @@
   "description": "react-component",
   "repository": "https://github.com/DTStack/dt-react-component",
   "main": "lib/index.js",
-  "module": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
   "scripts": {
     "build-css": "export NODE_ENV='prod' && gulp",
     "increase-memory-limit": "cross-env LIMIT=8096 increase-memory-limit",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "build-storybook": "export NODE_ENV='production' && build-storybook -c .storybook -o dist",
-    "compile": "npm run build-css && npm run build-ts",
-    "build-ts": "tsc -p tsconfig.build.json",
+    "compile-esm": "export NODE_MODULE_ENV='esm' && npm run build-css && npm run build-esm-ts",
+    "compile-lib": "export NODE_MODULE_ENV='lib' && npm run build-css && npm run build-lib-ts",
+    "compile": "npm run compile-esm && npm run compile-lib",
+    "build-esm-ts": "tsc -p tsconfig.esm.json",
+    "build-lib-ts": "tsc -p tsconfig.lib.json",
     "release": "./scripts/release.sh",
     "deploy-storybook": "storybook-to-ghpages",
     "deploy": "./scripts/deploy.sh",

tsconfig.esm.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "outDir": "./esm/",
+    "module": "esnext",
+    "target": "es6",
+    "declaration": true,
+    "jsx": "react",
+    "moduleResolution": "Node",
+    "keyofStringsOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
+  },
+  "include": [
+    "src/components"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "**/__tests__/*.test.tsx",
+  ]
+}

tsconfig.json

@@ -9,14 +9,22 @@
     "allowJs": true,
     "module": "commonjs",
     "target": "es5",
-    "lib": ["es6", "es2016", "dom"],
+    "lib": [
+      "es6",
+      "es2016",
+      "dom"
+    ],
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": false,
     "importHelpers": true,
     "paths": {},
     "skipLibCheck": true,
-    "typeRoots": ["node", "node_modules/@types", "./typings"]
+    "typeRoots": [
+      "node",
+      "node_modules/@types",
+      "./typings"
+    ]
   },
   "exclude": [
     "node_modules",
@@ -26,5 +34,10 @@
     "src/public/**/*",
     "./gulpfile.js"
   ],
-  "include": ["./**/*.ts", "./**/*.tsx", "src/**/*", "gulpfile.js"]
-}
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "src/**/*",
+    "gulpfile.js"
+  ]
+}

tsconfig.lib.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib/",
+    "module": "commonjs",
+    "target": "es5",
+    "declaration": true,
+    "jsx": "react",
+    "moduleResolution": "Node",
+    "keyofStringsOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
+  },
+  "include": [
+    "src/components"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "**/__tests__/*.test.tsx",
+  ]
+}