在 vue
中可以使用 process.env 访问配置文件内的属性,根据不同的环境找到对应的配置文件,
.env
.env.development
.env.production
复制代码
同样在小程序跨端框架中,例如mpx
等多个跨端框架同样支持可以文件维度条件编译的能力。mpx跨平台编译文档[1]
文档中有对文件维度条件编译做出了解释,例如在微信->支付宝的项目中存在一个业务地图组件map.mpx,由于微信和支付宝中的原生地图组件标准差异非常大,无法通过框架转译方式直接进行跨平台输出,这时你可以在相同的位置新建一个map.ali.mpx,在其中使用支付宝的技术标准进行开发,编译系统会根据当前编译的mode来加载对应模块,当mode为ali时,会优先加载map.ali.mpx,反之则会加载map.mpx。
若在
web
项目中,我们如何实现文件维度条件编译的功能呢?
本文就以自定义 webpack loader
的方案实现该能力.
项目目录结构如下:
// index.js
import bridge from './mode/bridge.js'
// 目录
├── mode
│ ├── bridge.js
│ ├── bridge.dev.js
│ └── bridge.prod.js
├── index.js
复制代码
该
polymorphism-loader
目前已发布,可以安装使用
将实现步骤梳理成文字,再将文字转换为代码即可。
import xxx from xxx
;在webpack中通过 options.mode
当做环境配置,如下所示:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'polymorphism-loader',
options: {
mode: 'prod'
}
}]
}
]
复制代码
const loaderUtils = require('loader-utils')
const utils = require('./utils')
/**
* 返回处理后的文件源
* @param {*} source 文件源
* @returns {string} 处理后的文件源
*/
function getResource (source) {
const options = loaderUtils.getOptions(this) || {}
let resource = source
let requireFileStatements = source.match(utils.REG.matchRequireStatements)
if (requireFileStatements && options.mode) {
for (let i = 0, len = requireFileStatements.length; i < len; i++) {
let requireFilePath = requireFileStatements[i].match(utils.REG.matchRequireFilePath)[0]
requireFilePath = requireFilePath.substring(1, requireFilePath.length - 1)
const { fileName, filePath } = utils.getContextData(this.context, requireFilePath)
const fileList = utils.genFileList(filePath)
const modeFileName = utils.getModeFileName(fileName, options.mode)
if (fileList.some(item => item.indexOf(modeFileName) > -1)) {
let list = requireFilePath.split('/')
list.pop()
list.push(modeFileName)
resource = resource.replace(requireFilePath, list.join('/'))
console.log(resource)
}
}
}
return resource
}
module.exports = function(
source,
map,
meta,
) {
const resource = getResource.apply(this, [source])
this.callback(null, resource, map, meta)
}
复制代码
定义一个 getResource
方法,将 source
源内容传入,返回处理后的源内容。loaderUtils.getOptions
方法获取传入的配置,这里可以获取到 mode
数据。通过正则匹配出引入文件语法,再筛选出引入文件的地址. 通过 utils.getContextData
方法获取到引入文件地址的绝对路径以及文件名,通过 utils.genFileList
方法获取文件夹内的所有文件,再通过 utils.getModeFileName
方法匹配出经过多态处理的文件名,最后在文件中匹配是否存在该多态文件,若存在则替换。
以下为 utils.js 内容
// utils.js
const fs = require("fs")
const REG = {
replaceFileName: /([^\\/]+)\.([^\\/]+)/i,
matchRequireStatements: /import.*from.*(\'|\")/g,
matchRequireFilePath: /(\"|\').*(\"|\')/g
}
/**
* 返回引入文件的绝对路径 和 文件名
* @param {string} context 当前加载的文件所在的文件夹路径 /polymorphism-loader/src
* @param {string} requireFilePath 文件中引入的路径 ./event/event
* @return {object}
* filePath: /polymorphism-loader/src/event
* fileName: event
*/
function getContextData (context, requireFilePath) {
function running (contextList, requireFilePathList) {
if (requireFilePathList.length) {
const name = requireFilePathList.shift()
switch (name) {
case '.':
return running(contextList, requireFilePathList)
case '..':
return running([contextList, contextList.pop()][0], requireFilePathList)
default:
return running([contextList, contextList.push(name)][0], requireFilePathList)
}
}
return contextList.join('/')
}
let requireFilePathList = requireFilePath.split('/')
let contextList = context.split('/')
let fileName = requireFilePathList.pop()
let filePath = running(contextList, requireFilePathList)
return {
fileName: fileName,
filePath: filePath
}
}
/**
* 获取文件夹下所有文件名
* @param {*} filePath 文件夹路径
* @returns {array}
*/
function genFileList (filePath) {
let filesList = []
let files = fs.readdirSync(filePath); // 需要用到同步读取
files.forEach((file) => {
let states = fs.statSync(filePath + '/' + file)
// 判断是否是目录,是就继续递归
if (states.isDirectory()) {
genFileList(filePath + '/' + file, filesList)
} else {
// 不是就将文件push进数组,此处可以正则匹配是否是 .js 先忽略
filesList.push(file)
}
})
return filesList
}
/**
* 返回组合多态文件名
* name.js ===> name.[mode].js
* @param {*} fileName
* @param {*} mode
* @returns {string}
*/
function getModeFileName (fileName, mode) {
let modeFileName = null
if (fileName.match(REG.replaceFileName)) {
fileName.replace(REG.replaceFileName, ($1, $2, $3) => {
modeFileName = $2 + '.' + mode + '.' + $3
})
} else {
modeFileName = fileName + '.' + mode
}
return modeFileName
}
module.exports = {
REG,
getContextData,
genFileList,
getModeFileName
}
复制代码
目前该 loader
为初版,存在很多已知缺陷,比如目前只匹配 import from
语句,不支持样式文件,没有过滤文件的能力,只对webpack4做过测试等,这些问题后续会慢慢更新迭代.
polymorphism-loader 源码:https://github.com/dengwb1991/polymorphism-loader
Copyright© 2013-2020
All Rights Reserved 京ICP备2023019179号-8