From 25487bab0be1d426bd3c5467cd41938d0e4c3e91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=AF=9B=E7=91=9E?= Date: Wed, 13 May 2020 17:56:09 +0800 Subject: [PATCH] =?UTF-8?q?Feat:=20=E5=A2=9E=E5=8A=A0=E5=8F=AF=E8=AE=BF?= =?UTF-8?q?=E9=97=AE=E7=9A=84=E5=85=A8=E5=B1=80=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 6 +++--- README.md | 26 ++++++++++++++++---------- build/alias.js | 14 +++++++++----- vue.config.js | 19 +++++++++++-------- 4 files changed, 39 insertions(+), 26 deletions(-) diff --git a/.env b/.env index bdad7d3..b24896b 100644 --- a/.env +++ b/.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"]] diff --git a/README.md b/README.md index 88bbba1..af595f6 100644 --- a/README.md +++ b/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)配置入口 ``` diff --git a/build/alias.js b/build/alias.js index 2c498d0..ff7aa0d 100644 --- a/build/alias.js +++ b/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 } diff --git a/vue.config.js b/vue.config.js index 56001a0..51b280b 100644 --- a/vue.config.js +++ b/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])) }