fix(mini-runner): 支持快应用编译后模板与样式的检测

NervJS · Dec 31, 2019 · e38ebc7 · e38ebc7
1 parent 1e8aef1
commit e38ebc7
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/packages/taro-mini-runner/package.json b/packages/taro-mini-runner/package.json
@@ -44,8 +44,10 @@
     "better-babel-generator": "^6.26.1",
     "chalk": "^2.4.2",
     "copy-webpack-plugin": "^5.0.3",
+    "css": "2.2.4",
     "css-loader": "^3.0.0",
     "csso-webpack-plugin": "^1.0.0-beta.12",
+    "css-what": "3.2.0",
     "file-loader": "^4.0.0",
     "fs-extra": "^8.0.1",
     "less-loader": "^5.0.0",

diff --git a/packages/taro-mini-runner/src/loaders/quickappStyleLoader.ts b/packages/taro-mini-runner/src/loaders/quickappStyleLoader.ts
@@ -0,0 +1,5 @@
+import styleRewriter from '../quickapp/style-rewriter'
+
+export default function quickappStyleLoader (source) {
+  return styleRewriter(source)
+}
diff --git a/packages/taro-mini-runner/src/plugins/MiniPlugin.ts b/packages/taro-mini-runner/src/plugins/MiniPlugin.ts
@@ -21,6 +21,7 @@ import { resolveScriptPath, buildUsingComponents, isNpmPkg, resolveNpmSync, isEm
 import TaroSingleEntryDependency from '../dependencies/TaroSingleEntryDependency'
 import { getTaroJsQuickAppComponentsPath, generateQuickAppUx, getImportTaroSelfComponents, generateQuickAppManifest } from '../utils/helper'
 import parseAst from '../utils/parseAst'
+import rewriterTemplate from '../quickapp/template-rewriter'
 
 import TaroLoadChunksPlugin from './TaroLoadChunksPlugin'
 import TaroNormalModulesPlugin from './TaroNormalModulesPlugin'
@@ -700,6 +701,7 @@ export default class MiniPlugin {
         }
       } else {
         let hitScriptItem
+        template = template ? rewriterTemplate(template) : template
         Object.keys(compilation.assets).forEach(item => {
           if (stylePath.indexOf(item) >= 0) {
             const relativeStylePath = promoteRelativePath(path.relative(scriptPath, stylePath))
@@ -757,7 +759,7 @@ export default class MiniPlugin {
     Object.keys(taroFileTypeMap).forEach(item => {
       const relativePath = item.replace(compiler.context, '')
       const itemInfo = taroFileTypeMap[item]
-      if (typeof itemInfo.code !== 'string') {
+      if (typeof itemInfo.code === 'string') {
         new VirtualModulePlugin({
           moduleName: relativePath,
           contents: itemInfo.code

diff --git a/packages/taro-mini-runner/src/quickapp/style-rewriter.ts b/packages/taro-mini-runner/src/quickapp/style-rewriter.ts
@@ -7,7 +7,7 @@ interface StyleLog {
   reason: string;
 }
 
-export default function rewriter (code, isProduction) {
+export default function rewriter (code, isProduction?) {
   const logs: StyleLog[] = []
   const ast = css.parse(code, {
     silent: true
@@ -47,7 +47,7 @@ export default function rewriter (code, isProduction) {
   // 输出转换结果
   try {
     const resContent = css.stringify(ast, {
-      compress: isProduction
+      compress: !!isProduction
     })
     return resContent
   } catch (e) {

diff --git a/packages/taro-mini-runner/src/quickapp/template-rewriter.ts b/packages/taro-mini-runner/src/quickapp/template-rewriter.ts
@@ -2,7 +2,7 @@ import parseXml from './template/parser'
 import rewriteNode from './template/node'
 import serialize from './template/serialize'
 
-export default function rewriterTemplate(code : string): string {
+export default function rewriterTemplate (code : string): string {
   // 解析Code
   const viewNodes = parseXml(`<root>${code}</root>`).children
   // 解析视图组件

diff --git a/packages/taro-mini-runner/src/webpack/chain.ts b/packages/taro-mini-runner/src/webpack/chain.ts
@@ -115,12 +115,16 @@ export const getUrlLoader = pipe(mergeOption, partial(getLoader, 'url-loader'))
 export const getFileLoader = pipe(mergeOption, partial(getLoader, 'file-loader'))
 export const getFileParseLoader = pipe(mergeOption, partial(getLoader, path.resolve(__dirname, '../loaders/fileParseLoader')))
 export const getWxTransformerLoader = pipe(mergeOption, partial(getLoader, path.resolve(__dirname, '../loaders/wxTransformerLoader')))
-
 const getExtractCssLoader = () => {
   return {
     loader: MiniCssExtractPlugin.loader
   }
 }
+const getQuickappStyleLoader = () => {
+  return {
+    loader: require.resolve(path.resolve(__dirname, '../loaders/quickappStyleLoader'))
+  }
+}
 export const getMiniCssExtractPlugin = pipe(mergeOption, listify, partial(getPlugin, MiniCssExtractPlugin))
 export const getDefinePlugin = pipe(mergeOption, listify, partial(getPlugin, webpack.DefinePlugin))
 export const getUglifyPlugin = ([enableSourceMap, uglifyOptions]) => {
@@ -175,6 +179,7 @@ export const getModule = (appPath: string, {
 
   babel
 }) => {
+  const isQuickapp = buildAdapter === BUILD_TYPES.QUICKAPP
   const postcssOption: IPostcssOption = postcss || {}
 
   const cssModuleOptions: PostcssOption.cssModules = recursiveMerge({}, defaultCssModuleOption, postcssOption.cssModules)
@@ -204,13 +209,14 @@ export const getModule = (appPath: string, {
   ]
 
   const extractCssLoader = getExtractCssLoader()
+  const quickappStyleLoader = getQuickappStyleLoader()
 
   const cssLoader = getCssLoader(cssOptions)
   const cssLoaders: {
     include?;
     use;
   }[] = [{
-    use: [cssLoader]
+    use: isQuickapp ? [cssLoader, quickappStyleLoader] : [cssLoader]
   }]
 
   if (cssModuleOptions.enable) {