fix(cli): build ui with plugins

packages/taro-cli/src/presets/platforms/ui.ts

@@ -1,12 +1,14 @@
 import * as path from 'path'
 import * as chokidar from 'chokidar'
-
 import * as _ from 'lodash'
 
+import { IBuildHooks } from '../../util/types'
+
 export default (ctx) => {
   ctx.registerPlatform({
     name: 'ui',
-    async fn () {
+    async fn ({ config }) {
+      const { modifyWebpackChain, modifyBuildAssets, onBuildFinish } = config
       const {
         H5_OUTPUT_NAME,
         RN_OUTPUT_NAME,
@@ -24,6 +26,7 @@ export default (ctx) => {
       const { buildForWeapp } = require('../../ui/weapp')
       const { buildForQuickapp } = require('../../ui/quickapp')
       const { Compiler: RNCompiler } = require('../../rn_bak')
+      const buildHooks: IBuildHooks = { modifyWebpackChain, modifyBuildAssets, onBuildFinish }
 
       const { uiIndex, isWatch } = ctx.runOpts
       const { appPath, sourcePath } = ctx.paths
@@ -91,7 +94,7 @@ export default (ctx) => {
           extraWatchFiles = uiConfig.extraWatchFiles
           extraWatchFiles.forEach(item => {
             watchList.push(path.join(appPath, item.path))
-            if (typeof item.handler === 'function') item.callback = item.handler({buildH5Script})
+            if (typeof item.handler === 'function') item.callback = item.handler({ buildH5Script })
           })
         }
 
@@ -133,7 +136,7 @@ export default (ctx) => {
           compiler.processFiles(filePath)
 
           if (process.env.TARO_BUILD_TYPE === 'script') {
-            buildH5Script(buildData)
+            buildH5Script(buildData, buildHooks)
           } else {
             copyFileToDist(fileTempPath, tempPath, outputDir, buildData)
             // 依赖分析
@@ -172,7 +175,7 @@ export default (ctx) => {
           extraWatchFiles && extraWatchFiles.forEach(item => {
             if (filePath.indexOf(item.path.substr(2)) < 0) return
             if (typeof item.callback === 'function') {
-              item.callback()
+              item.callback(buildData, buildHooks)
               processed = true
             }
           })
@@ -222,11 +225,11 @@ export default (ctx) => {
       if (platforms && Array.isArray(platforms)) {
         platforms.includes(PLATFORMS.WEAPP) && await buildForWeapp(buildData)
         platforms.includes(PLATFORMS.QUICKAPP) && await buildForQuickapp(buildData)
-        platforms.includes(PLATFORMS.H5) && await buildForH5(uiIndex, buildData)
+        platforms.includes(PLATFORMS.H5) && await buildForH5(uiIndex, buildData, buildHooks)
         platforms.includes(PLATFORMS.RN) && await buildForRN(uiIndex, buildData)
       } else {
         await buildForWeapp(buildData)
-        await buildForH5(uiIndex, buildData)
+        await buildForH5(uiIndex, buildData, buildHooks)
       }
       if (isWatch) {
         watchFiles()

packages/taro-cli/src/ui/h5.ts

@@ -1,55 +1,57 @@
 import * as fs from 'fs-extra'
 import * as path from 'path'
 import * as wxTransformer from '@tarojs/transformer-wx'
-import { printLog, resolveScriptPath, npm as npmProcess, processTypeEnum, REG_TYPESCRIPT, chalk } from '@tarojs/helper'
+import { printLog, resolveScriptPath, npm as npmProcess, processTypeEnum, REG_TYPESCRIPT, chalk, recursiveMerge } from '@tarojs/helper'
 
 import { Compiler } from '../h5'
 import { IBuildData, IH5BuildConfig } from './ui.types'
 import { copyFileToDist, analyzeFiles, parseEntryAst, analyzeStyleFilesImport, H5_OUTPUT_NAME, copyAllInterfaceFiles } from './common'
+import { IBuildHooks } from '../util/types'
 
-async function buildForH5 (uiIndex = 'index', buildData: IBuildData) {
+async function buildForH5 (uiIndex = 'index', buildData: IBuildData, buildHooks: IBuildHooks) {
   const {appPath} = buildData
   const compiler = new Compiler(appPath, uiIndex, true)
   console.log()
   console.log(chalk.green('开始编译 H5 端组件库！'))
   await compiler.buildTemp()
   if (process.env.TARO_BUILD_TYPE === 'script') {
-    await buildH5Script(buildData)
+    await buildH5Script(buildData, buildHooks)
   } else {
     await buildH5Lib(uiIndex, buildData)
   }
 }
 
-async function buildH5Script (buildData: IBuildData) {
+async function buildH5Script (buildData: IBuildData, buildHooks: IBuildHooks) {
   const { appPath, projectConfig, entryFileName, sourceDirName, tempPath } = buildData
-  let { outputDirName } = buildData
-  const h5Config: IH5BuildConfig = Object.assign({}, projectConfig.h5)
+  const h5Config: IH5BuildConfig = Object.assign({}, projectConfig.h5, buildHooks)
   const entryFile = path.basename(entryFileName, path.extname(entryFileName)) + '.js'
-  outputDirName = `${outputDirName}/${H5_OUTPUT_NAME}`
-  h5Config.env = projectConfig.env
-  h5Config.defineConstants = projectConfig.defineConstants
-  h5Config.plugins = projectConfig.plugins
-  h5Config.babel = projectConfig.babel
-  h5Config.csso = projectConfig.csso
-  h5Config.uglify = projectConfig.uglify
-  h5Config.sass = projectConfig.sass
-  h5Config.designWidth = projectConfig.designWidth
+  h5Config.isWatch = false
+  recursiveMerge(h5Config, {
+    env: projectConfig.env,
+    defineConstants: projectConfig.defineConstants,
+    plugins: projectConfig.plugins,
+    babel: projectConfig.babel,
+    csso: projectConfig.csso,
+    uglify: projectConfig.uglify,
+    sass: projectConfig.sass,
+    designWidth: projectConfig.designWidth,
+    sourceRoot: sourceDirName,
+    outputRoot: `${buildData.outputDirName}/${H5_OUTPUT_NAME}`,
+    entry: Object.assign({
+      app: [path.join(tempPath, entryFile)]
+    }, h5Config.entry),
+    isWatch: false
+  })
   if (projectConfig.deviceRatio) {
     h5Config.deviceRatio = projectConfig.deviceRatio
   }
-  h5Config.sourceRoot = sourceDirName
-  h5Config.outputRoot = outputDirName
-  h5Config.entry = Object.assign({
-    app: [path.join(tempPath, entryFile)]
-  }, h5Config.entry)
-  h5Config.isWatch = false
   const webpackRunner = await npmProcess.getNpmPkg('@tarojs/webpack-runner', appPath)
   webpackRunner(appPath, h5Config)
 }
 
 async function buildH5Lib (uiIndex, buildData: IBuildData) {
   try {
-    const {sourceDir, appPath, outputDirName, tempPath} = buildData
+    const { sourceDir, appPath, outputDirName, tempPath } = buildData
     const outputDir = path.join(appPath, outputDirName, H5_OUTPUT_NAME)
     const tempEntryFilePath = resolveScriptPath(path.join(tempPath, uiIndex))
     const outputEntryFilePath = path.join(outputDir, path.basename(tempEntryFilePath))

packages/taro-cli/src/ui/ui.types.ts

@@ -1,28 +1,29 @@
 import { IProjectConfig, IH5Config } from '@tarojs/taro/types/compile'
+import { IBuildHooks } from '../util/types'
 
 export interface IBuildData {
-  appPath: string,
-  projectConfig: IProjectConfig,
-  sourceDirName: string,
-  outputDirName: string,
-  sourceDir: string,
-  entryFilePath: string,
-  entryFileName: string,
-  tempPath: string,
+  appPath: string
+  projectConfig: IProjectConfig
+  sourceDirName: string
+  outputDirName: string
+  sourceDir: string
+  entryFilePath: string
+  entryFileName: string
+  tempPath: string
   rnTempPath: string
 }
 
-export interface IH5BuildConfig extends IH5Config {
-  env?: object,
-  defineConstants?: object,
-  plugins?: object,
-  designWidth?: number,
-  deviceRatio?: object,
-  sourceRoot?: string,
-  outputRoot?: string,
-  isWatch?: boolean,
-  babel?: object,
-  sass?: object,
-  csso?: object,
+export interface IH5BuildConfig extends IH5Config, IBuildHooks {
+  env?: object
+  defineConstants?: object
+  plugins?: object
+  designWidth?: number
+  deviceRatio?: object
+  sourceRoot?: string
+  outputRoot?: string
+  isWatch?: boolean
+  babel?: object
+  sass?: object
+  csso?: object
   uglify?: object
 }

packages/taro-cli/src/util/types.ts

@@ -1,61 +1,61 @@
 export interface IInstallOptions {
-  dev: boolean,
+  dev: boolean
   peerDependencies?: boolean
 }
 
 export interface INpmConfig {
-  dir: string,
+  dir: string
   name: string
 }
 
 export interface IResolvedCache  {
   [key: string]: {
-    main: string,
+    main: string
     files: string[]
   }
 }
 
 export interface IPrettierConfig {
-  printWidth?: number,
-  tabWidth?: number,
-  useTabs?: boolean,
-  semi?: boolean,
-  singleQuote?: boolean,
-  jsxSingleQuote?: boolean,
-  trailingComma?: 'none' | 'es5' | 'all',
-  bracketSpacing?: boolean,
-  jsxBracketSameLine?: boolean,
-  arrowParens?: 'avoid' | 'always',
-  rangeStart?: number,
-  rangeEnd?: number,
-  parser?: 'babel' | 'babylon' | 'flow' | 'typescript' | 'css' | 'scss' | 'less' | 'json' | 'json5' | 'json-stringify' | 'graphql' | 'markdown' | 'mdx' | 'html' | 'vue' | 'angular' | 'yaml',
-  filepath?: string,
-  requirePragma?: boolean,
-  insertPragma?: boolean,
-  proseWrap?: 'always' | 'never' | 'preserve',
-  htmlWhitespaceSensitivity?: 'css' | 'strict' | 'ignore',
+  printWidth?: number
+  tabWidth?: number
+  useTabs?: boolean
+  semi?: boolean
+  singleQuote?: boolean
+  jsxSingleQuote?: boolean
+  trailingComma?: 'none' | 'es5' | 'all'
+  bracketSpacing?: boolean
+  jsxBracketSameLine?: boolean
+  arrowParens?: 'avoid' | 'always'
+  rangeStart?: number
+  rangeEnd?: number
+  parser?: 'babel' | 'babylon' | 'flow' | 'typescript' | 'css' | 'scss' | 'less' | 'json' | 'json5' | 'json-stringify' | 'graphql' | 'markdown' | 'mdx' | 'html' | 'vue' | 'angular' | 'yaml'
+  filepath?: string
+  requirePragma?: boolean
+  insertPragma?: boolean
+  proseWrap?: 'always' | 'never' | 'preserve'
+  htmlWhitespaceSensitivity?: 'css' | 'strict' | 'ignore'
   endOfLine?: 'auto' | 'lf' | 'crlf' | 'cr'
 }
 
 export interface IBuildOptions {
-  type?: string,
-  watch?: boolean,
-  platform?: string,
-  port?: number,
-  release?: boolean,
-  envHasBeenSet?: boolean,
-  page?: string,
-  component?: string,
+  type?: string
+  watch?: boolean
+  platform?: string
+  port?: number
+  release?: boolean
+  envHasBeenSet?: boolean
+  page?: string
+  component?: string
   uiIndex?: string
 }
 
 export interface IMiniAppBuildConfig {
-  adapter: string,
-  watch?: boolean,
-  envHasBeenSet?: boolean,
-  port?: number,
-  release?: boolean,
-  page?: string,
+  adapter: string
+  watch?: boolean
+  envHasBeenSet?: boolean
+  port?: number
+  release?: boolean
+  page?: string
   component?: string
 }
 
@@ -64,8 +64,9 @@ export interface IOption {
 }
 
 export interface IBuildHooks {
-  onBuildStart?: Function,
-  modifyWebpackChain?: Function,
-  modifyBuildAssets?: Function,
+  onBuildStart?: Function
+  modifyBuildAssets?: Function
+  modifyWebpackChain?: Function
+  modifyBuildTempFileContent?: Function
   onBuildFinish?: Function
 }