Skip to content

Commit

Permalink
Feat: 增加可访问的全局变量
Browse files Browse the repository at this point in the history
  • Loading branch information
毛瑞 authored and Maorey committed May 13, 2020
1 parent 2c25285 commit 25487ba
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 26 deletions.
6 changes: 3 additions & 3 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -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"]]
26 changes: 16 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,8 @@ yarn build # --watch: 跟踪文件变化 --report: 生成打包分析
yarn build --entries=foo,bar
```

可通过环境变量访问: `process.env.ENTRIES: string[]`

#### 指定路由配置(通过别名):

1. `route` 目录结构
Expand All @@ -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
Expand Down Expand Up @@ -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)配置入口
```

Expand Down
14 changes: 9 additions & 5 deletions build/alias.js
Original file line number Diff line number Diff line change
Expand Up @@ -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))) {
Expand All @@ -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()
Expand Down Expand Up @@ -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]]) {
Expand Down Expand Up @@ -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
}
19 changes: 11 additions & 8 deletions vue.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]))
}
Expand Down

0 comments on commit 25487ba

Please sign in to comment.