【有手就行】自定义webpack loader实现文件维度条件编译

背景

在 vue 中可以使用 process.env 访问配置文件内的属性，根据不同的环境找到对应的配置文件，

.env
.env.development
.env.production

同样在小程序跨端框架中，例如mpx 等多个跨端框架同样支持可以文件维度条件编译的能力。 mpx跨平台编译文档

文档中有对文件维度条件编译做出了解释，例如在微信->支付宝的项目中存在一个业务地图组件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

若是开发环境(dev)下，则引入mode内的 bridge.dev.js 文件；
若是生产环境(prod)下，则引入mode内的 bridge.prod.js 文件；
若是其他环境下，则引入mode内的bridge.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 源码