feat: support webpack for component build

Author: linfeng

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pri",
-  "version": "4.1.9",
+  "version": "4.2.0-beta",
   "types": "src/node/index.ts",
   "main": "built/node/index.js",
   "scripts": {
@@ -154,4 +154,4 @@
     "worker-loader": "2.0.0",
     "yargs": "15.0.2"
   }
-}
+}

src/utils/define.ts

@@ -49,6 +49,10 @@ interface CustomRoute {
   redirect?: string;
 }
 
+export interface IEntryPath {
+  [key: string]: string;
+}
+
 export type PipeCallback = (text: string) => string | Promise<string>;
 
 export class ProjectInfo {
@@ -272,6 +276,11 @@ export class ProjectConfig {
    * is material component
    */
   public materialComponent = false;
+
+  /**
+   * entries for component build
+   */
+  componentEntries: IEntryPath;
 }
 
 export type SetPipe = (pipeName: string, callback: PipeCallback) => void;

src/utils/ts-plus-babel.ts

@@ -1,4 +1,5 @@
 import * as gulp from 'gulp';
+import * as fs from 'fs-extra';
 import * as gulpBabel from 'gulp-babel';
 import * as gulpSass from 'gulp-sass';
 import * as gulpWatch from 'gulp-watch';
@@ -13,6 +14,7 @@ import { getBabelOptions } from './babel-options';
 import { globalState } from './global-state';
 import { babelPluginTransformImport } from './babel-plugin-transfer-import';
 import { PackageInfo } from './define';
+import { runWebpack } from './webpack';
 
 function getGulpByWatch(watch: boolean, filesPath: string) {
   if (watch) {
@@ -66,6 +68,27 @@ const buildSass = (watch: boolean, outdir: string, wholeProject: boolean, source
   });
 };
 
+const buildCssWithWebpack = (outDir: string, copyDir: string) => {
+  const cssFileNames = Object.keys(pri.sourceConfig.componentEntries).map(file => `${file}.css`);
+
+  return runWebpack({
+    mode: 'production',
+    entryPath: pri.sourceConfig.componentEntries,
+    distDir: outDir,
+    outFileName: '[name].js',
+    outCssFileName: '[name].css',
+  }).then(() => {
+    const distFiles = fs.readdirSync(outDir);
+    distFiles.forEach(file => {
+      const basename = path.basename(file);
+      if (!cssFileNames.includes(basename)) {
+        fs.removeSync(path.join(outDir, file));
+      }
+    });
+    fs.copySync(outDir, copyDir);
+  });
+};
+
 const mvResources = (watch: boolean, outdir: string, wholeProject: boolean, sourcePath: string, sourceType: string) => {
   const selectedSourceType = sourceType || pri.selectedSourceType;
   const targetPath =
@@ -126,9 +149,14 @@ export const tsPlusBabel = async (watch = false, wholeProject = false, packageIn
   const sourcePath = packageInfo ? packageInfo.rootPath : null;
   const sourceType = packageInfo ? packageInfo.name : null;
 
+  // build component with webpack if config multy entries
+  if (pri.sourceConfig.componentEntries) {
+    await buildCssWithWebpack(mainDistPath, moduleDistPath);
+  }
+
   return Promise.all([
-    buildSass(watch, mainDistPath, wholeProject, sourcePath),
-    buildSass(watch, moduleDistPath, wholeProject, sourcePath),
+    pri.sourceConfig.componentEntries ? null : buildSass(watch, mainDistPath, wholeProject, sourcePath),
+    pri.sourceConfig.componentEntries ? null : buildSass(watch, moduleDistPath, wholeProject, sourcePath),
 
     buildTs(
       watch,

src/utils/webpack-config.ts

@@ -8,6 +8,7 @@ import { globalState, transferToAllAbsolutePaths as transferToAllAbsolutePathsWi
 import { plugin } from './plugins';
 import { srcPath, tempPath } from './structor-config';
 import { getBabelOptions } from './babel-options';
+import { IEntryPath } from './define';
 
 export interface IHtmlTemplateArgs {
   dashboardServerPort?: number;
@@ -18,7 +19,7 @@ export interface IHtmlTemplateArgs {
 
 export type IOptions<T = {}> = {
   mode: 'development' | 'production';
-  entryPath: string | string[];
+  entryPath: string | string[] | IEntryPath;
   htmlTemplatePath?: string;
   htmlTemplateArgs?: IHtmlTemplateArgs;
   publicPath?: string;