TypeScript transformer-wx.transformer-wx函數代碼示例

 files.forEach(file => {
   if (fs.existsSync(file)) {
     const code = fs.readFileSync(file).toString()
     const transformResult = wxTransformer({
       code,
       sourcePath: file,
       outputPath: file,
       isNormal: true,
       isTyped: REG_TYPESCRIPT.test(file)
     })
     const {
       styleFiles,
       scriptFiles,
       jsonFiles,
       mediaFiles
     } = parseAst(PARSE_AST_TYPE.NORMAL, transformResult.ast, [], file, file, true)
     const resFiles = styleFiles.concat(scriptFiles, jsonFiles, mediaFiles)
     if (resFiles.length) {
       resFiles.forEach(item => {
         copyFileToDist(item, sourceDir, outputDir)
       })
     }
     if (scriptFiles.length) {
       analyzeFiles(scriptFiles, sourceDir, outputDir)
     }
     if (styleFiles.length) {
       analyzeStyleFilesImport(styleFiles, sourceDir, outputDir)
     }
   }
 })

export function isFileToBeTaroComponent (
  code: string,
  sourcePath: string,
  outputPath: string
) {
  const {
    buildAdapter,
    sourceDir,
    constantsReplaceList,
    jsxAttributeNameReplace
  } = getBuildData()
  const transformResult: IWxTransformResult = wxTransformer({
    code,
    sourcePath: sourcePath,
    sourceDir,
    outputPath: outputPath,
    isNormal: true,
    isTyped: REG_TYPESCRIPT.test(sourcePath),
    adapter: buildAdapter,
    env: constantsReplaceList,
    jsxAttributeNameReplace
  })
  const { ast }: IWxTransformResult = transformResult
  let isTaroComponent = false

  traverse(ast, {
    ClassDeclaration (astPath) {
      astPath.traverse({
        ClassMethod (astPath) {
          if (astPath.get('key').isIdentifier({ name: 'render' })) {
            astPath.traverse({
              JSXElement () {
                isTaroComponent = true
              }
            })
          }
        }
      })
    },

    ClassExpression (astPath) {
      astPath.traverse({
        ClassMethod (astPath) {
          if (astPath.get('key').isIdentifier({ name: 'render' })) {
            astPath.traverse({
              JSXElement () {
                isTaroComponent = true
              }
            })
          }
        }
      })
    }
  })

  return {
    isTaroComponent,
    transformResult
  }
}

async function buildH5Lib () {
  try {
    const { appPath, outputDirName, tempPath } = buildData
    const outputDir = path.join(appPath, outputDirName, h5OutputName)
    const tempEntryFilePath = resolveScriptPath(path.join(tempPath, 'index'))
    const outputEntryFilePath = path.join(outputDir, path.basename(tempEntryFilePath))
    const code = fs.readFileSync(tempEntryFilePath).toString()
    const transformResult = wxTransformer({
      code,
      sourcePath: tempEntryFilePath,
      outputPath: outputEntryFilePath,
      isNormal: true,
      isTyped: REG_TYPESCRIPT.test(tempEntryFilePath)
    })
    const { styleFiles, components, code: generateCode } = parseEntryAst(transformResult.ast, tempEntryFilePath)
    const relativePath = path.relative(appPath, tempEntryFilePath)
    printLog(processTypeEnum.COPY, '發現文件', relativePath)
    fs.ensureDirSync(path.dirname(outputEntryFilePath))
    fs.writeFileSync(outputEntryFilePath, generateCode)
    if (components.length) {
      components.forEach(item => {
        copyFileToDist(item.path as string, tempPath, outputDir)
      })
      analyzeFiles(components.map(item => item.path as string), tempPath, outputDir)
    }
    if (styleFiles.length) {
      styleFiles.forEach(item => {
        copyFileToDist(item, tempPath, path.join(appPath, outputDirName))
      })
      analyzeStyleFilesImport(styleFiles, tempPath, path.join(appPath, outputDirName))
    }
  } catch (err) {
    console.log(err)
  }
}

 files.forEach(file => {
   if (!fs.existsSync(file) || this.hadBeenCopyedFiles.has(file)) {
     return
   }
   const code = fs.readFileSync(file).toString()
   let outputFilePath = file.replace(this.root, this.convertDir)
   const extname = path.extname(outputFilePath)
   if (/\.wxs/.test(extname)) {
     outputFilePath += '.js'
   }
   const transformResult = wxTransformer({
     code,
     sourcePath: file,
     outputPath: outputFilePath,
     isNormal: true,
     isTyped: REG_TYPESCRIPT.test(file)
   })
   const { ast, scriptFiles } = this.parseAst({
     ast: transformResult.ast,
     outputFilePath,
     sourceFilePath: file
   })
   const jsCode = generateMinimalEscapeCode(ast)
   this.writeFileToTaro(outputFilePath, prettier.format(jsCode, prettierJSConfig))
   printLog(processTypeEnum.COPY, 'JS 文件', this.generateShowPath(outputFilePath))
   this.hadBeenCopyedFiles.add(file)
   this.generateScriptFiles(scriptFiles)
 })

function getJSAst (code, filePath) {
  return wxTransformer({
    code,
    sourcePath: filePath,
    isNormal: true,
    isTyped: REG_TYPESCRIPT.test(filePath),
    adapter: 'rn'
  }).ast
}

async function buildForWeapp () {
  const { appPath, entryFilePath, outputDirName, entryFileName, sourceDir } = buildData
  console.log()
  console.log(chalk.green('開始編譯小程序端組件庫！'))
  if (!fs.existsSync(entryFilePath)) {
    console.log(chalk.red('入口文件不存在，請檢查！'))
    return
  }
  try {
    const outputDir = path.join(appPath, outputDirName, weappOutputName)
    const outputEntryFilePath = path.join(outputDir, entryFileName)
    const code = fs.readFileSync(entryFilePath).toString()
    const transformResult = wxTransformer({
      code,
      sourcePath: entryFilePath,
      outputPath: outputEntryFilePath,
      isNormal: true,
      isTyped: REG_TYPESCRIPT.test(entryFilePath)
    })
    const { styleFiles, components } = parseEntryAst(transformResult.ast, entryFilePath)
    if (styleFiles.length) {
      const outputStylePath = path.join(outputDir, 'css', 'index.css')
      await compileDepStyles(outputStylePath, styleFiles)
    }
    const relativePath = path.relative(appPath, entryFilePath)
    printLog(processTypeEnum.COPY, '發現文件', relativePath)
    fs.ensureDirSync(path.dirname(outputEntryFilePath))
    fs.copyFileSync(entryFilePath, path.format({
      dir: path.dirname(outputEntryFilePath),
      base: path.basename(outputEntryFilePath)
    }))
    if (components.length) {
      components.forEach(item => {
        copyFileToDist(item.path as string, sourceDir, outputDir)
      })
      analyzeFiles(components.map(item => item.path as string), sourceDir, outputDir)
    }
  } catch (err) {
    console.log(err)
  }
}

 copyFilesFromSrcToOutput(cFiles, (sourceFilePath, outputFilePath) => {
   if (fs.existsSync(sourceFilePath)) {
     const fileContent = fs.readFileSync(sourceFilePath).toString()
     const match = SCRIPT_CONTENT_REG.exec(fileContent)
     if (match) {
       const scriptContent = match[1]
       const transformResult: IWxTransformResult = wxTransformer({
         code: scriptContent,
         sourcePath: sourceFilePath,
         sourceDir: getBuildData().sourceDir,
         outputPath: outputFilePath,
         isNormal: true,
         isTyped: false,
         adapter: BUILD_TYPES.QUICKAPP
       })
       const res = parseAst(PARSE_AST_TYPE.NORMAL, transformResult.ast, [], sourceFilePath, outputFilePath)
       const newFileContent = fileContent.replace(SCRIPT_CONTENT_REG, `<script>${res.code}</script>`)
       fs.ensureDirSync(path.dirname(outputFilePath))
       fs.writeFileSync(outputFilePath, newFileContent)
     }
   }
 })

export async function compileScriptFile (
  content: string,
  sourceFilePath: string,
  outputFilePath: string,
  adapter: BUILD_TYPES
): Promise<string> {
  const {
    appPath,
    sourceDir,
    constantsReplaceList,
    jsxAttributeNameReplace,
    projectConfig
  } = getBuildData()
  if (NODE_MODULES_REG.test(sourceFilePath) && fs.existsSync(outputFilePath)) {
    return fs.readFileSync(outputFilePath).toString()
  }
  const babelConfig = getBabelConfig(projectConfig!.plugins!.babel)
  const compileScriptRes = await callPlugin('babel', content, sourceFilePath, babelConfig, appPath)
  const code = compileScriptRes.code
  if (!shouldTransformAgain()) {
    return code
  }
  const transformResult: IWxTransformResult = wxTransformer({
    code,
    sourcePath: sourceFilePath,
    sourceDir,
    outputPath: outputFilePath,
    isNormal: true,
    isTyped: false,
    adapter,
    env: constantsReplaceList,
    jsxAttributeNameReplace
  })
  const res = parseAst(PARSE_AST_TYPE.NORMAL, transformResult.ast, [], sourceFilePath, outputFilePath)
  return res.code
}

export async function buildSingleComponent (
  componentObj: IComponentObj,
  buildConfig: IComponentBuildConfig = {}
): Promise<IBuildResult> {
  const componentsBuildResult = getComponentsBuildResult()
  if (isComponentHasBeenBuilt(componentObj.path as string) && componentsBuildResult.get(componentObj.path as string)) {
    return componentsBuildResult.get(componentObj.path as string) as IBuildResult
  }
  const {
    appPath,
    buildAdapter,
    constantsReplaceList,
    sourceDir,
    outputDir,
    sourceDirName,
    outputDirName,
    npmOutputDir,
    nodeModulesPath,
    outputFilesTypes,
    isProduction,
    jsxAttributeNameReplace,
    projectConfig
  } = getBuildData()
  const isQuickApp = buildAdapter === BUILD_TYPES.QUICKAPP

  if (componentObj.path) {
    componentsNamedMap.set(componentObj.path, {
      name: componentObj.name,
      type: componentObj.type
    })
  }
  const component = componentObj.path
  if (!component) {
    printLog(processTypeEnum.ERROR, '組件錯誤', `組件${_.upperFirst(_.camelCase(componentObj.name))}路徑錯誤，請檢查！（可能原因是導出的組件名不正確）`)
    return {
      js: '',
      wxss: '',
      wxml: ''
    }
  }
  let componentShowPath = component.replace(appPath + path.sep, '')
  componentShowPath = componentShowPath.split(path.sep).join('/')
  let isComponentFromNodeModules = false
  let sourceDirPath = sourceDir
  let buildOutputDir = outputDir
  // 來自 node_modules 的組件
  if (NODE_MODULES_REG.test(componentShowPath)) {
    isComponentFromNodeModules = true
    sourceDirPath = nodeModulesPath
    buildOutputDir = npmOutputDir
  }
  let outputComponentShowPath = componentShowPath.replace(isComponentFromNodeModules ? NODE_MODULES : sourceDirName, buildConfig.outputDirName || outputDirName)
  outputComponentShowPath = outputComponentShowPath.replace(path.extname(outputComponentShowPath), '')
  printLog(processTypeEnum.COMPILE, '組件文件', componentShowPath)
  const componentContent = fs.readFileSync(component).toString()
  const outputComponentJSPath = component.replace(sourceDirPath, buildConfig.outputDir || buildOutputDir).replace(path.extname(component), outputFilesTypes.SCRIPT)
  const outputComponentWXMLPath = outputComponentJSPath.replace(path.extname(outputComponentJSPath), outputFilesTypes.TEMPL)
  const outputComponentWXSSPath = outputComponentJSPath.replace(path.extname(outputComponentJSPath), outputFilesTypes.STYLE)
  const outputComponentJSONPath = outputComponentJSPath.replace(path.extname(outputComponentJSPath), outputFilesTypes.CONFIG)
  if (!isComponentHasBeenBuilt(component)) {
    setHasBeenBuiltComponents(component)
  }
  try {
    const isTaroComponentRes = isFileToBeTaroComponent(componentContent, component, outputComponentJSPath)
    const componentExportsMap = getComponentExportsMap()
    if (!isTaroComponentRes.isTaroComponent) {
      const transformResult = isTaroComponentRes.transformResult
      const componentRealPath = parseComponentExportAst(transformResult.ast, componentObj.name as string, component, componentObj.type as string)
      const realComponentObj: IComponentObj = {
        path: componentRealPath,
        name: componentObj.name,
        type: componentObj.type
      }
      let isInMap = false
      notTaroComponents.add(component)
      if (componentExportsMap.size) {
        componentExportsMap.forEach(componentExports => {
          componentExports.forEach(item => {
            if (item.path === component) {
              isInMap = true
              item.path = componentRealPath
            }
          })
        })
      }
      if (!isInMap) {
        const componentExportsMapItem = componentExportsMap.get(component) || []
        componentExportsMapItem.push(realComponentObj)
        setComponentExportsMap(component, componentExportsMapItem)
      }
      return await buildSingleComponent(realComponentObj, buildConfig)
    }
    const transformResult: IWxTransformResult = wxTransformer({
      code: componentContent,
      sourcePath: component,
      sourceDir,
      outputPath: outputComponentJSPath,
      isRoot: false,
      isTyped: REG_TYPESCRIPT.test(component),
      isNormal: false,
//.........這裏部分代碼省略.........

 return scriptFiles.map(async item => {
   if (path.isAbsolute(item)) {
     let outputItem
     if (NODE_MODULES_REG.test(item)) {
       outputItem = item.replace(nodeModulesPath, npmOutputDir).replace(path.extname(item), '.js')
     } else {
       outputItem = item.replace(path.join(sourceDir), path.join(outputDir)).replace(path.extname(item), '.js')
     }
     const weappConf = Object.assign({}, projectConfig.weapp)
     const useCompileConf = Object.assign({}, weappConf.compile)
     const compileExclude = useCompileConf.exclude || []
     let isInCompileExclude = false
     compileExclude.forEach(excludeItem => {
       if (item.indexOf(path.join(appPath, excludeItem)) >= 0) {
         isInCompileExclude = true
       }
     })
     if (isInCompileExclude) {
       copyFileSync(item, outputItem)
       return
     }
     if (!isBuildingScripts.get(outputItem)) {
       isBuildingScripts.set(outputItem, true)
       try {
         const code = fs.readFileSync(item).toString()
         const transformResult = wxTransformer({
           code,
           sourcePath: item,
           sourceDir,
           outputPath: outputItem,
           isNormal: true,
           isTyped: REG_TYPESCRIPT.test(item),
           adapter: buildAdapter,
           env: constantsReplaceList,
           jsxAttributeNameReplace
         })
         const ast = transformResult.ast
         const res = parseAst(PARSE_AST_TYPE.NORMAL, ast, [], item, outputItem)
         const fileDep = dependencyTree.get(item) || {} as IDependency
         let resCode = res.code
         if (needUseBabel) {
           resCode = await compileScriptFile(res.code, item, outputItem, buildAdapter)
         }
         fs.ensureDirSync(path.dirname(outputItem))
         if (isProduction && needUseBabel) {
           uglifyJS(resCode, item, appPath, projectConfig!.plugins!.uglify as TogglableOptions)
         }
         if (NODE_MODULES_REG.test(item)) {
           resCode = npmCodeHack(outputItem, resCode, buildAdapter)
         }
         fs.writeFileSync(outputItem, resCode)
         let modifyOutput = outputItem.replace(appPath + path.sep, '')
         modifyOutput = modifyOutput.split(path.sep).join('/')
         printLog(processTypeEnum.GENERATE, '依賴文件', modifyOutput)
         // 編譯依賴的腳本文件
         if (isDifferentArray(fileDep['script'], res.scriptFiles)) {
           if (buildDepSync) {
             await Promise.all(compileDepScripts(res.scriptFiles, needUseBabel, buildDepSync))
           } else {
             compileDepScripts(res.scriptFiles, needUseBabel, buildDepSync)
           }
         }
         // 拷貝依賴文件
         if (isDifferentArray(fileDep['json'], res.jsonFiles)) {
           copyFilesFromSrcToOutput(res.jsonFiles)
         }
         if (isDifferentArray(fileDep['media'], res.mediaFiles)) {
           copyFilesFromSrcToOutput(res.mediaFiles)
         }
         fileDep['script'] = res.scriptFiles
         fileDep['json'] = res.jsonFiles
         fileDep['media'] = res.mediaFiles
         dependencyTree.set(item, fileDep)
       } catch (err) {
         printLog(processTypeEnum.ERROR, '編譯失敗', item.replace(appPath + path.sep, ''))
         console.log(err)
       }
     }
   }
 })