bmui/compileES/compile-sfc.js

Bluemoon Moon Components

// 编译.vue文件
const compileJs = require('./compile-js')
const compiler = require("vue-template-compiler")
const compileUtils = require("@vue/component-compiler-utils")
const fs = require('fs-extra')
const EXPORT = 'export default {';
const RENDER_FN = '__render' // 内部render函数别名
const STATIC_RENDER_FN = '__staticRender' // 内部static render函数别名

// 编译vue文件内的template
function compileTemplate (source) {
  const result = compileUtils.compileTemplate({
    compiler,
    source,
    isProduction: true,
  });
  return result.code;
}

function trim(code) {
  return code.replace(/\/\/\n/g, '').trim();
}

// 将render函数插入到js中
function injectRender(script, render) {
  script = trim(script);
  render = render
      .replace('var render', `var ${RENDER_FN}`)
      .replace('var staticRenderFns', `var ${STATIC_RENDER_FN}`);
  return script.replace(EXPORT, `${render}\n${EXPORT}\n  render: ${RENDER_FN},\n\n  staticRenderFns: ${STATIC_RENDER_FN},\n`);
}

module.exports = async function (filePath) {
  const jsFilePath = filePath.replace(/\.vue$/gi, '.js')
  const source = fs.readFileSync(filePath, 'utf-8')
  const descriptor = compileUtils.parse({
    source,
    compiler,
    needMap: false,
  })
  const { template } = descriptor
  if (descriptor.script) {
    let script = descriptor.script.content
    if (template) { // vue文件有template的话
      const render = compileTemplate(template.content)
      script = injectRender(script, render)
    }
    fs.writeFileSync(jsFilePath, script)
    fs.remove(filePath) // 删除掉vue文件
    await compileJs(jsFilePath)
  }
}