Feat: 增加可访问的全局变量

Author: 毛瑞

.env

@@ -20,8 +20,8 @@ SEARCH_FIELD=_target\d+
 
 # 指定入口或通过cli命令(优先 --entries=foo,bar)指定,逗号分隔
 # _ENTRIES=index
-# 配置路由别名, json: [
+# 配置别名, json: [
 #  [别名, 路径(相对根目录或入口), 默认指令(可省略)] 或者
 #  [别名, 路径, [允许的指令, ...], 默认指令(可省略)]
-#  ... ], 可使用cli命令指定指令(优先 --routes=foo.bar,bar.foo )
-_ROUTES=[["@iRoute", "index/route"], ["@oRoute", "other/route"]]
+#  ... ], 可使用cli命令指定指令(优先 --alias=foo.bar,bar.foo )
+_ALIAS=[["@iRoute", "index/route"]]

README.md

@@ -151,6 +151,8 @@ yarn build # --watch: 跟踪文件变化 --report: 生成打包分析
   yarn build --entries=foo,bar
   ```
 
+  可通过环境变量访问: `process.env.ENTRIES: string[]`
+
 #### 指定路由配置(通过别名):
 
   1. `route` 目录结构
@@ -162,24 +164,26 @@ yarn build # --watch: 跟踪文件变化 --report: 生成打包分析
   # ...
   ```
 
-  2. 配置 [.env](.env) `_ROUTES`, 示例:
+  2. 配置 [.env](.env) `_ALIAS`, 示例:
 
   ```bash
-  # 配置路由别名, json: [
+  # 配置别名, json: [
   #  [别名, 路径(相对根目录或入口), 默认指令(可省略)] 或者
   #  [别名, 路径, [允许的指令, ...], 默认指令(可省略)]
-  #  ... ], 可使用cli命令指定指令(优先 --routes=foo.bar,bar.foo )
-  _ROUTES=[["@fRoute", "foo/route", "foo"], ["@bRoute", "src/pages/bar/route", ["foo", "bar"], "bar"]]
+  #  ... ], 可使用cli命令指定指令(优先 --alias=foo.bar,bar.foo )
+  _ALIAS=[["@fRoute", "foo/route", "foo"], ["@bRoute", "src/pages/bar/route", ["foo", "bar"], "bar"]]
   ```
 
-  3. 通过cli命令: `routes`: `入口.指令,...`
+  3. 通过cli命令: `alias`: `入口.指令,...`
 
   ```bash
-  yarn dev --routes=foo.bar
-  yarn build --routes=bar # 省略形式: 指令唯一时
-  yarn build --routes=foo.bar,bar.foo
+  yarn dev --alias=foo.bar
+  yarn build --alias=bar # 省略形式: 指令唯一时
+  yarn build --alias=foo.bar,bar.foo
   ```
 
+  可通过环境变量访问: `process.env.ALIAS: { [key in process.env.ENTRIES]: string[] }`
+
 #### 命令帮助
 
 ```bash
@@ -239,8 +243,10 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 │   │── e2e # e2e 测试(cypress): https://www.cypress.io
 │   └── unit # unit 测试(jest): https://jestjs.io
 ├── build # 工具类脚本
-├── cypress.json # cypress 配置: https://docs.cypress.io/guides/references/configuration.html
-├── tsconfig.json # typeScript 配置: https://www.tslang.cn/docs/handbook/tsconfig-json.html
+├── .env # 所有环境的环境变量(可通过 process.env 访问)
+├── .env.[mode] # 指定环境的环境变量
+├── .env.*.local # 本地环境变量(git忽略)
+├── ... # 配置文件
 └── vue.config.js # 工程(vue cli)配置入口
 ```
 

build/alias.js

@@ -8,7 +8,7 @@ const path = require('path')
 const updateJSON = require('./updateJSON')
 
 function getArgs() {
-  const REG_ROUTE = /(?:--)?routes[= ](\w+(?:\.\w+)?(?:,\w+(?:\.\w+)?)*)/
+  const REG_ROUTE = /(?:--)?alias[= ](\w+(?:\.\w+)?(?:,\w+(?:\.\w+)?)*)/
   let args, i
   for (args of process.argv) {
     if ((args = REG_ROUTE.exec(args))) {
@@ -25,9 +25,9 @@ function getArgs() {
  * @param {Objects} pages 页面入口配置
  * @param {ChainWebpack} config
  * @param {Object} ALIAS 别名字典
- * @param {Array} ROUTES 路由别名
+ * @param {Array} ALIAS_CONFIG 别名配置
  */
-module.exports = function(pages, config, ALIAS, ROUTES) {
+module.exports = function(pages, config, ALIAS, ALIAS_CONFIG) {
   const SUFFIX = '/*'
   const REG_BACKSLASH = /\\/g
   const ROOT_DIR = path.resolve()
@@ -61,10 +61,11 @@ module.exports = function(pages, config, ALIAS, ROUTES) {
   }
 
   /// 【路由别名配置】 ///
-  if (ROUTES && ROUTES.length) {
+  const DIC = {} // for 环境变量
+  if (ALIAS_CONFIG && ALIAS_CONFIG.length) {
     const args = getArgs()
     let page, arg, i, j
-    for (entry of ROUTES) {
+    for (entry of ALIAS_CONFIG) {
       alias = entry[1].split('/')
       alias[0] || alias.shift()
       if (pages[alias[0]]) {
@@ -115,10 +116,13 @@ module.exports = function(pages, config, ALIAS, ROUTES) {
       if (!entry[2] || (arg && entry[2].includes(arg))) {
         alias = entry[0]
         arg && (folderName += '.' + arg)
+        ;(DIC[page] || (DIC[page] = [])).push(arg || '')
         fs.existsSync(folderName) && setAlias()
       }
     }
   }
 
   updateJSON('tsconfig.json', 'compilerOptions.paths', TS_PATHS)
+
+  return DIC
 }

vue.config.js

@@ -41,17 +41,20 @@ module.exports = {
   // https://github.com/neutrinojs/webpack-chain#getting-started
   chainWebpack(config) {
     config.cache(true) // 使用缓存
+
+    /// 别名&环境变量 ///
+    const prefix = 'process.env.'
+    const REG_ENV = /^[A-Z]+(?:_[A-Z]+)?$/
     let env // 工具人
-    /// 设置目录别名 已有: @ => src ///
     try {
-      env = JSON.parse(ENV._ROUTES)
+      env = JSON.parse(ENV._ALIAS)
     } catch (error) {}
-    require('./build/alias')(pages, config, ALIAS, env)
-
-    /// 环境变量 ///
-    env = {}
-    const prefix = 'process.env.' // 工具人二号
-    const REG_ENV = /^[A-Z]+(?:_[A-Z]+)?$/
+    env = {
+      [prefix + 'ENTRIES']: JSON.stringify(Object.keys(pages)),
+      [prefix + 'ALIAS']: JSON.stringify(
+        require('./build/alias')(pages, config, ALIAS, env)
+      ),
+    }
     for (const att in ENV) {
       REG_ENV.test(att) && (env[prefix + att] = JSON.stringify(ENV[att]))
     }