代码中不再注入环境变量; 模板文件支持条件判断

index.js

@@ -37,6 +37,8 @@ if (NODE_VERSION < 16.6) {
 
 switch (mode) {
   case 'dev':
+    process.env.NODE_ENV = 'development'
+
     import(PROTOCOL + CONFIG_FILE)
       .then(function (conf) {
         createServer(WORK_SPACE, conf.default)
@@ -47,6 +49,8 @@ switch (mode) {
     break
 
   case 'build':
+    process.env.NODE_ENV = 'production'
+
     import(PROTOCOL + CONFIG_FILE)
       .then(function (conf) {
         let dist = conf.buildDir || 'dist'

lib/compile-vue.js

@@ -127,14 +127,14 @@ export function parseJs(
   code = '',
   imports,
   { IS_MPA, currentPage, IS_ENTRY, DEPLOY_PATH } = {},
-  isBuild,
   filename
 ) {
   let fixedStyle = '\n\n'
   let ASSETS_DIR = '/@/'
+  let isBuild = process.env.NODE_ENV === 'production'
 
   if (isBuild) {
-    ASSETS_DIR = '/assets/' // + (IS_MPA ? 'pages/' : '')
+    ASSETS_DIR = '/assets/'
   }
   try {
     code = Es.transformSync(code).code || ''
@@ -157,6 +157,7 @@ export function parseJs(
   return (
     code
       .replace(/\r\n/g, '\n')
+      .replace(/process\.env\.NODE_ENV/g, `'${process.env.NODE_ENV}'`)
       .replace(
         /import ([\w\W]*?) from (["'])(.*?)\2/g,
         function (m, alias, q, name) {
@@ -257,7 +258,7 @@ export function parseJs(
  * @param file <String> 文件路径
  * @return <String> 返回转换后的js代码
  */
-export function compileVue(file, imports, options = {}, isBuild) {
+export function compileVue(file, imports, options = {}) {
   let filename = file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')
   let code = (fs.cat(file) || '').toString().replace(/\r\n/g, '\n')
   let CACHE = options.CACHE || {}
@@ -317,7 +318,7 @@ export function compileVue(file, imports, options = {}, isBuild) {
     CACHE[file] = { changed: false, js, html }
   }
 
-  output += parseJs(js, imports, options, isBuild, file).replace(
+  output += parseJs(js, imports, options, file).replace(
     'export default {',
     `\nconst __sheets__ = [...document.adoptedStyleSheets]\n${html}\n\nconst __sfc__ = {\n  render,\n`
   )
@@ -347,19 +348,17 @@ document.adoptedStyleSheets = __sheets__
 /**
  * 解析模板html
  */
-export function parseHtml(html, { page, imports, entry }, isBuild = false) {
+export function parseHtml(html, { page, imports, entry }) {
   return html
     .replace(/\r\n/g, '\n')
     .replace(
       '</head>',
-      `  <script>window.process = {env: {NODE_ENV: '${
-        isBuild ? 'production' : 'development'
-      }'}}</script>\n${
-        isBuild
-          ? ''
-          : `  <script>${
+      `${
+        process.env.NODE_ENV === 'development'
+          ? `  <script>${
               Es.transformSync(HMR_SCRIPT, { minify: true }).code
             }</script>`
+          : ''
       }</head>`
     )
     .replace('{{title}}', page.title || '')
@@ -370,4 +369,9 @@ export function parseHtml(html, { page, imports, entry }, isBuild = false) {
       '<script src="main.js"></script>',
       `<script type="module">\n${entry}\n</script>`
     )
+    .replace(/\{\{#if(.*?)\}\}([\w\W]*?)\{\{#\/if\}\}/g, (m, c, code) => {
+      let res = Function('return ' + c)()
+      return res ? code : ''
+    })
+    .replace(/process\.env\.NODE_ENV/g, `'${process.env.NODE_ENV}'`)
 }

lib/prod.js

@@ -23,23 +23,16 @@ export default function compile(root = '', dist = '', conf = {}) {
     .filter(it => fs.isfile(it.path) && it.ext !== '')
 
   let compileFiles = function (currentPage, page, files) {
+    let options = { IS_MPA, currentPage, SOURCE_DIR, DEPLOY_PATH }
+
     for (let it of files) {
       // 入口文件, 特殊处理
       if (page && it.path === page.entry) {
         let entry = fs.cat(page.entry).toString()
 
-        entry = parseJs(
-          entry,
-          conf.imports,
-          { IS_MPA, currentPage, IS_ENTRY: true, DEPLOY_PATH },
-          true
-        )
+        entry = parseJs(entry, conf.imports, { ...options, IS_ENTRY: true })
 
-        let code = parseHtml(
-          template,
-          { page, imports: conf.imports, entry },
-          true
-        )
+        let code = parseHtml(template, { page, imports: conf.imports, entry })
 
         fs.echo(code, join(dist, `${currentPage}.html`))
         continue
@@ -52,12 +45,7 @@ export default function compile(root = '', dist = '', conf = {}) {
       switch (it.ext) {
         case '.vue':
           {
-            let code = compileVue(
-              it.path,
-              conf.imports,
-              { IS_MPA, currentPage, SOURCE_DIR, DEPLOY_PATH },
-              true
-            )
+            let code = compileVue(it.path, conf.imports, options)
 
             Es.transform(code, { minify: true }).then(r => {
               fs.echo(
@@ -72,12 +60,7 @@ export default function compile(root = '', dist = '', conf = {}) {
           {
             let code = fs.cat(it.path)
 
-            code = parseJs(
-              code + '',
-              conf.imports,
-              { IS_MPA, currentPage, DEPLOY_PATH },
-              true
-            )
+            code = parseJs(code + '', conf.imports, options)
             Es.transform(code, { minify: true }).then(r => {
               fs.echo(r.code, join(dist, 'assets/', pageDir, it.name))
             })