feat: convert default values in index.html

originjs · Jul 23, 2021 · 1a3ab20 · 1a3ab20
1 parent 4745360
commit 1a3ab20
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 16 deletions.
diff --git a/src/ast-parse/transformations/indexHtmlTransformationVueCli.ts b/src/ast-parse/transformations/indexHtmlTransformationVueCli.ts
@@ -6,11 +6,8 @@ import * as parser from 'vue-eslint-parser'
 import { Node } from 'vue-eslint-parser/ast/nodes'
 import { stringSplice } from '../../utils/common'
 import { pathFormat } from '../../utils/file'
-import { parseVueCliConfig } from '../../config/parse'
-import { VueCliConfig } from '../../config/vuecli'
 import path from 'path'
 import fs from 'fs'
-import ejs from 'ejs'
 
 const templateStart: string = '<template>'
 const templateEnd: string = '</template>'
@@ -46,16 +43,6 @@ export const astTransform:ASTTransformation = async (fileInfo: FileInfo, transfo
   let frontIndentLength: number = 0
   let offset: number = 0
 
-  const vueConfigFile: string = path.resolve(rootDir, 'vue.config.js')
-  const vueConfig: VueCliConfig = await parseVueCliConfig(vueConfigFile)
-  const publicPath: string = process.env.PUBLIC_URL || vueConfig.publicPath || vueConfig.baseUrl || ''
-  // TODO: default values exposed by plugins and client-side env variables
-  const jspData = {
-    BASE_URL: publicPath,
-    NODE_ENV: '',
-    ...process.env
-  }
-
   let bodyNode
 
   parser.AST.traverseNodes(root, {
@@ -84,8 +71,15 @@ export const astTransform:ASTTransformation = async (fileInfo: FileInfo, transfo
   transformedHtml = transformedHtml.slice(0, transformedHtml.length - templateEnd.length)
   transformedHtml = transformedHtml.slice(templateStart.length)
 
-  // replace jsp tags
-  transformedHtml = ejs.compile(transformedHtml, {})(jspData)
+  // TODO: default values exposed by plugins and client-side env variables
+  // replace variable name with `process.env['variableName']`
+  const globalVariableReg: RegExp = /VUE_APP_\w+/g
+  const globalVariableNameSet: Set<string> = new Set(transformedHtml.match(globalVariableReg) || [])
+  const globalVariableNames: string[] = ['BASE_URL', 'NODE_ENV', ...Array.from(globalVariableNameSet)]
+  globalVariableNames.forEach(variableName => {
+    const replacementReg: RegExp = new RegExp(variableName, 'g')
+    transformedHtml = transformedHtml.replace(replacementReg, `process.env['${variableName}']`)
+  })
 
   const result: TransformationResult = {
     fileInfo: fileInfo,

diff --git a/src/ast-parse/transformations/indexHtmlTransformationWebpack.ts b/src/ast-parse/transformations/indexHtmlTransformationWebpack.ts
@@ -70,6 +70,16 @@ export const astTransform:ASTTransformation = async (fileInfo: FileInfo, transfo
   transformedHtml = transformedHtml.slice(0, transformedHtml.length - templateEnd.length)
   transformedHtml = transformedHtml.slice(templateStart.length)
 
+  // TODO: default values exposed by plugins and client-side env variables
+  // replace variable name with `process.env['variableName']`
+  const globalVariableReg: RegExp = /VUE_APP_\w+/g
+  const globalVariableNameSet: Set<string> = new Set(transformedHtml.match(globalVariableReg) || [])
+  const globalVariableNames: string[] = ['BASE_URL', 'NODE_ENV', ...Array.from(globalVariableNameSet)]
+  globalVariableNames.forEach(variableName => {
+    const replacementReg: RegExp = new RegExp(variableName, 'g')
+    transformedHtml = transformedHtml.replace(replacementReg, `process.env['${variableName}']`)
+  })
+
   const result: TransformationResult = {
     fileInfo: fileInfo,
     content: transformedHtml,

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -5,6 +5,7 @@ export const VITE_PLUGIN_VUE_VERSION = '^1.2.1'
 export const VITE_PLUGIN_VUE_JSX_VERSION = '^1.1.5'
 export const VITE_PLUGIN_VUE_TWO_VERSION = '^1.5.1'
 export const VITE_PLUGIN_ENV_COMPATIBLE = '^1.0.0'
+export const VITE_PLUGIN_HTML = '2.0.7'
 export const SASS_VERSION = '^1.34.0'
 export const VITE_PLUGIN_COMMONJS_VERSION = '^1.0.0-beta3'
 export const POSTCSS_VERSION = '^8.3.5'

diff --git a/src/generate/genePackageJson.ts b/src/generate/genePackageJson.ts
@@ -29,6 +29,7 @@ export function genePackageJson (packageJsonPath: string): void {
   }
 
   packageJson.devDependencies['vite-plugin-env-compatible'] = constants.VITE_PLUGIN_ENV_COMPATIBLE
+  packageJson.devDependencies['vite-plugin-html'] = constants.VITE_PLUGIN_HTML
   packageJson.devDependencies.vite = constants.VITE_VERSION
   // TODO scan files to determine whether you need to add the plugin
   packageJson.devDependencies['@originjs/vite-plugin-commonjs'] = constants.VITE_PLUGIN_COMMONJS_VERSION

diff --git a/src/template/vite.config.ejs b/src/template/vite.config.ejs
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import path from 'path';
 <% IMPORT_LIST.forEach(function (im) { -%>
 <%- im %>
-<% }); %>
+<% }); -%>
 
 // https://vitejs.dev/config/
 export default defineConfig(

diff --git a/src/transform/transformer.ts b/src/transform/transformer.ts
@@ -63,10 +63,12 @@ export function transformImporters (context: TransformContext) : void {
   }
   recordConver({ num: 'B04', feat: 'required plugins' })
   context.importers.push('import envCompatible from \'vite-plugin-env-compatible\';')
+  context.importers.push('import { injectHtml } from \'vite-plugin-html\';')
   context.importers.push('import { viteCommonjs } from \'@originjs/vite-plugin-commonjs\';')
   // TODO scan files to determine whether you need to add the plugin
   plugins.push(new RawValue('viteCommonjs()'))
   plugins.push(new RawValue('envCompatible()'))
+  plugins.push(new RawValue('injectHtml()'))
 
   context.config.plugins = plugins
 }