tourism-wxapp/node_modules/mp-html/tools/plugin.js

/**
 * @fileoverview 处理插件
 */
const path = require('path')
const through2 = require('through2')

const config = require('./config')

config.plugins.sort((a, b) => {
  // editable 置于最后面
  if (a === 'editable') return 1
  if (b === 'editable') return -1
  // markdown 置于最前面
  if (a === 'markdown') return -1
  if (b === 'markdown') return 1
  // 剩余任意顺序
  return 0
})

// 提取和替换标签名选择器（组件中仅支持 class 选择器）
const tagSelector = {}
let tagI = 0
if (config.externStyle) {
  config.externStyle = config.externStyle.replace(/[^,\s}]+(?=[^}]*{)/g, $ => {
    if (!/[a-zA-Z_]/.test($[0])) return $
    if (tagSelector[$]) return '.' + tagSelector[$]
    tagSelector[$] = '_' + tagI++
    return '.' + tagSelector[$]
  })
}

module.exports = {
  /**
   * @description 构建插件
   * @param {string} platform 使用平台
   */
  build (platform) {
    const builds = {} // 构建模块
    let pluginImports = '' // 插件引入
    let plugins = '' // 插件列表
    let voidTags = '' // 增加的自闭合标签
    let wxml = '' // 要引入到 node.wxml 中的内容
    let js = '' // 要引入到 node.js 中的内容
    let wxss = config.externStyle // 要引入到 node.wxss 中的内容
    const json = {} // 要引入到 node.json 中的内容

    // 收集插件中要写入模板文件的内容
    for (let i = 0; i < config.plugins.length; i++) {
      const plugin = config.plugins[i]
      let build = {}
      try {
        // 专用 build
        if (platform === 'uni-app') {
          build = require(`../plugins/${plugin}/uni-app/build.js`)
        } else {
          build = require(`../plugins/${plugin}/miniprogram/build.js`)
        }
      } catch (e) { }
      try {
        // 通用 build
        build = Object.assign(require(`../plugins/${plugin}/build.js`), build)
      } catch (e) { }
      // 可以在当前平台使用
      if (!build.platform || build.platform.includes(platform)) {
        builds[plugin] = build
        if (platform === 'uni-app') {
          plugins += plugin.replace(/-([a-z])/g, ($, $1) => $1.toUpperCase()) + ','
          pluginImports += `import ${plugin.replace(/-([a-z])/g, ($, $1) => $1.toUpperCase())} from './${plugin}/${build.main ? build.main : 'index.js'}'\n`
        } else {
          plugins += `require('./${plugin}/${build.main ? build.main : 'index.js'}'),`
        }
        if (build.template) {
          wxml += build.template.replace('wx:if', 'wx:elif').replace('v-if', 'v-else-if')
        }
        if (build.methods) {
          for (const method in build.methods) {
            js += build.methods[method].toString() + ','
          }
        }
        if (build.usingComponents) {
          Object.assign(json, build.usingComponents)
        }
        if (build.style) {
          wxss += build.style
        }
      }
    }

    // 加入其他自定义标签
    for (const item of config.customElements) {
      if (platform === 'uni-app') {
        if (item.platforms) {
          wxml += '<!-- #ifdef ' + item.platforms.join(' || ').toUpperCase() + ' -->'
        }
        voidTags += item.name + ','
        wxml += '<' + item.name + ' v-else-if="n.name==\'' + item.name + '\'" :class="n.attrs.class" :style="n.attrs.style"'
        if (item.attrs) {
          for (const attr of item.attrs) {
            wxml += ' :' + attr + '="n.attrs'
            if (attr.includes('-')) {
              wxml += '[\'' + attr + '\']"'
            } else {
              wxml += '.' + attr + '"'
            }
          }
        }
        wxml += ' />'
        if (item.platforms) {
          wxml += '<!-- #endif -->'
        }
      } else if (!item.platforms || item.platforms.join(',').toLowerCase().includes(platform)) {
        voidTags += item.name + ','
        wxml += '<' + item.name + ' wx:elif="{{n.name==\'' + item.name + '\'}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}"'
        if (item.attrs) {
          for (const attr of item.attrs) {
            wxml += ' ' + attr + '="{{n.attrs'
            if (attr.includes('-')) {
              wxml += '[\'' + attr + '\']}}"'
            } else {
              wxml += '.' + attr + '}}"'
            }
          }
        }
        wxml += ' />'
      }
    }

    return through2.obj(function (file, _, callback) {
      if (file.isBuffer()) {
        // src 目录
        if (file.base.includes('src')) {
          let content = file.contents.toString()
          if (file.basename === 'index.js' || file.basename === 'mp-html.vue') {
            // 注册插件列表
            if (platform === 'uni-app') {
              content = content.replace(/const\s*plugins\s*=\s*\[\]/, `${pluginImports}const plugins=[${plugins}]`)
            } else {
              content = content.replace(/plugins\s*=\s*\[\]/, `plugins=[${plugins}]`)
            }
          } else if (file.basename === 'parser.js') {
            // 设置标签名选择器
            content = content.replace(/tagSelector\s*=\s*{}/, `tagSelector=${JSON.stringify(tagSelector)}`)
            // 设置自闭合标签
              .replace(/voidTags\s*:\s*makeMap\('/, 'voidTags: makeMap(\'' + voidTags)
          } else if (file.basename === 'node.wxml') {
            // 引入模板
            content = content.replace(/<!--\s*insert\s*-->/, wxml)
          } else if (file.basename === 'node.js') {
            // 引入方法
            content = content.replace(/methods\s*:\s*{/, 'methods:{' + js)
          } else if (file.basename === 'node.wxss') {
            // 引入样式
            content = wxss + content
          } else if (file.basename === 'node.json') {
            // 引入组件声明
            const comps = JSON.stringify(json).slice(1, -1)
            if (comps) {
              content = content.replace(/"usingComponents"\s*:\s*{/, '"usingComponents":{' + comps + ',')
            }
          } else if (file.basename === 'node.vue') {
            // 引入 vue
            content = content.replace(/<!--\s*insert\s*-->/, wxml)
              .replace(/methods\s*:\s*{/, 'methods:{' + js)
              .replace('<style>', '<style>' + wxss.replace(/\.[a-zA-Z_][^)}]*?[{,]/g, '/deep/ $&')).replace(/,url/g, ', url')
            let importComp = ''
            let comps = ''
            for (let item in json) {
              const val = json[item]
              // 插件无法通过这种方式引入
              if (val.includes('plugin://')) continue
              item = item.replace(/-([a-z])/g, (_, $1) => $1.toUpperCase())
              importComp += 'import ' + item + " from '" + val + "'\n"
              comps += item + ',\n'
            }
            content = content.replace('<script>', '<script>\n' + importComp)
              .replace(/components\s*:\s*{/, 'components: {\n' + comps)
          } else if (file.basename === 'local.html' && wxss) {
            // 引入样式
            content = '<style>' + wxss + '</style>' + content
          }
          file.contents = Buffer.from(content)
          for (const item in builds) {
            if (builds[item].handler) {
              builds[item].handler(file, platform)
            }
          }
        } else {
          // plugins 目录
          const name = file.relative.split(path.sep)[0]
          const build = builds[name]
          // 本平台不支持使用
          if (!build || file.extname === '.md' || file.basename === 'build.js') {
            callback()
            return
          }
          // import
          if (build.import) {
            if (typeof build.import === 'string') {
              if (file.relative.includes(build.import)) {
                file.import = true
              }
            } else {
              for (let i = 0; i < build.import.length; i++) {
                if (file.relative.includes(build.import[i])) {
                  file.import = true
                  break
                }
              }
            }
          }
          if (build.handler) {
            build.handler(file, platform)
          }
        }
      }
      this.push(file)
      callback()
    })
  },
  /**
   * @description 引入样式文件到 node.wxss 中
   */
  importCss () {
    let css = ''
    return through2.obj(function (file, _, callback) {
      if (file.isBuffer()) {
        let content = file.contents.toString()
        // 要被引入的文件
        if (file.import) {
          css += content
          callback()
          return
        }
        // 引入到对应位置
        if (file.basename === 'node.wxss') {
          content = css + content
        } else if (file.basename === 'node.vue') {
          content = content.replace('<style>', '<style>' + css.replace(/\.[a-z_][^)}]+?[{,]/g, '/deep/ $&')).replace(/,url/g, ', url')
        } else if (file.basename === 'local.html' && css) {
          content = '<style>' + css + '</style>' + content
        }
        file.contents = Buffer.from(content)
      }
      this.push(file)
      callback()
    })
  }
}