Skip to content

feat: 支持分包加载 #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 16, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ docs/_book
.DS_Store
.idea
*.iml
yarn.lock
72 changes: 25 additions & 47 deletions lib/mp-compiler/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ const babel = require('babel-core')
const path = require('path')
const fs = require('fs')
const deepEqual = require('deep-equal')
const relative = require('relative')

const { parseConfig, parseComponentsDeps, parseGlobalComponents, clearGlobalComponents } = require('./parse')
const { parseComponentsDeps: parseComponentsDepsTs } = require('./parse-ts')
const { genScript, genStyle, genPageWxml } = require('./templates')
const { genPageWxml } = require('./templates')

const {
cacheFileInfo,
getFileInfo,
getCompNameBySrc,
getCompNameAndSrc,
resolveTarget,
covertCCVar,
cacheSlots,
getSlots,
htmlBeautify,
getBabelrc,
getPageSrc
getBabelrc
} = require('./util')

let slotsHookAdded = false
Expand Down Expand Up @@ -48,17 +48,16 @@ function genComponentWxml (compiled, options, emitFile, emitError, emitWarning)
return htmlBeautify(wxmlCodeStr)
}

function createAppWxml (emitFile, resourcePath, rootComponent) {
function createAppWxml (emitFile, resourcePath, rootComponent, context) {
const { src } = getFileInfo(resourcePath) || {}
const componentName = getCompNameBySrc(rootComponent)
const wxmlContent = genPageWxml(componentName, src)
const wxmlSrc = src
emitFile(`${wxmlSrc}.wxml`, wxmlContent)
const { name: componentName, filePath: wxmlSrc } = getCompNameAndSrc(context, rootComponent)
const wxmlContent = genPageWxml(componentName, relative(`/${src}.wxml`, `/${wxmlSrc}`))
emitFile(`${src}.wxml`, wxmlContent)
}
// 更新全局组件时,需要重新生成wxml,用这个字段保存所有需要更新的页面及其参数
const cacheCreateWxmlFns = {}

function createWxml (emitWarning, emitError, emitFile, resourcePath, rootComponent, compiled, html) {
function createWxml ({ emitWarning, emitError, emitFile, resourcePath, context, compiled }) {
cacheCreateWxmlFns[resourcePath] = arguments
const { pageType, moduleId, components } = getFileInfo(resourcePath) || {}

Expand All @@ -71,12 +70,10 @@ function createWxml (emitWarning, emitError, emitFile, resourcePath, rootCompone
// name: 'comA$hash',
// moduleId: 'moduleId'
// }
const name = getCompNameBySrc(resourcePath)
const { name, filePath: wxmlSrc } = getCompNameAndSrc(context, resourcePath)
const options = { components, pageType, name, moduleId }
const wxmlContent = genComponentWxml(compiled, options, emitFile, emitError, emitWarning)
const wxmlSrc = `components/${name}`

emitFile(`${wxmlSrc}.wxml`, wxmlContent)
emitFile(wxmlSrc, wxmlContent)
}

// 编译出 wxml
Expand Down Expand Up @@ -106,7 +103,15 @@ function compileWxml (compiled, html) {
pollComponentsStatus()
})
.then(() => {
createWxml(this.emitWarning, this.emitError, this.emitFile, this.resourcePath, null, compiled, html)
createWxml({
emitWarning: this.emitWarning,
emitError: this.emitError,
emitFile: this.emitFile,
resourcePath: this.resourcePath,
context: this.options.context,
rootComponent: null,
compiled, html
})
})
}

Expand Down Expand Up @@ -151,14 +156,13 @@ function compileMPScript (script, mpOptioins, moduleId) {
// checkMPEntry 针对 entry main.js 的入口处理
// 编译出 app, page 的入口js/wxml/json

const startPageReg = /^\^/
let globalComponents
function compileMP (content, mpOptioins) {
const { resourcePath, emitFile, resolve, context, options } = this

const fileInfo = resolveTarget(resourcePath, options.entry)
cacheFileInfo(resourcePath, fileInfo)
const { src, name, isApp, isPage } = fileInfo
const { isApp, isPage } = fileInfo
if (isApp) {
// 解析前将可能存在的全局组件清空
clearGlobalComponents()
Expand All @@ -169,7 +173,7 @@ function compileMP (content, mpOptioins) {
const { metadata } = babel.transform(content, { extends: babelrc, plugins: isApp ? [parseConfig, parseGlobalComponents] : [parseConfig] })

// metadata: config
const { config, rootComponent, globalComponents: globalComps } = metadata
const { rootComponent, globalComponents: globalComps } = metadata

if (isApp) {
// 保存旧数据,用于对比
Expand Down Expand Up @@ -202,39 +206,13 @@ function compileMP (content, mpOptioins) {
}

if (isApp || isPage) {
// 生成入口 json
if (config) {
const configObj = config.value

// 只有 app 才处理 pages
if (isApp) {
const pages = Object.keys(options.entry).concat(configObj.pages).filter(v => v && v !== 'app').map(getPageSrc)

// ^ 开头的放在第一个
const startPageIndex = pages.findIndex(v => startPageReg.test(v))
if (startPageIndex !== -1) {
const startPage = pages[startPageIndex].slice(1)
pages.splice(startPageIndex, 1)
pages.unshift(startPage)
}
configObj.pages = [...new Set(pages)]
}
emitFile(`${src}.json`, JSON.stringify(configObj, null, ' '))
}

// 生成入口 js
emitFile(`${src}.js`, genScript(name, isPage, src))

// 生成入口 wxss
emitFile(`${src}.wxss`, genStyle(name, isPage, src))

// 这儿应该异步在所有的模块都清晰后再生成
// 生成入口 wxml
if (isPage && rootComponent) {
resolve(context, rootComponent, (err, rootComponentSrc) => {
if (err) return
// 这儿需要搞定 根组件的 路径
createAppWxml(emitFile, resourcePath, rootComponentSrc)
createAppWxml(emitFile, resourcePath, rootComponentSrc, this.options.context)
})
}
}
Expand All @@ -248,8 +226,8 @@ function resolveSrc (originComponents, components, resolveFn, context) {
resolveFn(context, originComponents[k], (err, realSrc) => {
if (err) return reject(err)
const com = covertCCVar(k)
const comName = getCompNameBySrc(realSrc)
components[com] = { src: comName, name: comName }
const { filePath, name } = getCompNameAndSrc(context, realSrc)
components[com] = { src: filePath, name }
resolve()
})
})
Expand Down
21 changes: 2 additions & 19 deletions lib/mp-compiler/templates.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
const { getPathPrefix } = require('./util')

function genScript (name, isPage, src) {
const prefix = isPage ? getPathPrefix(src) : './'

return `
require('${prefix}static/js/manifest')
require('${prefix}static/js/vendor')
require('${prefix}static/js/${name}')
`
}

function genStyle (name, isPage, src) {
const prefix = isPage ? getPathPrefix(src) : './'
return `@import "${prefix}static/css/${name}.wxss";`
}

function genPageWxml (templateName, src) {
return `<import src="${getPathPrefix(src)}components/${templateName}" /><template is="${templateName}" data="{{ ...$root['0'], $root }}"/>`
return `<import src="${src}" /><template is="${templateName}" data="{{ ...$root['0'], $root }}"/>`
}

module.exports = { genScript, genStyle, genPageWxml }
module.exports = { genPageWxml }
14 changes: 11 additions & 3 deletions lib/mp-compiler/util.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const path = require('path')
const fs = require('fs')
const relative = require('relative')

const pagesNameMap = Object.create(null)

Expand All @@ -15,8 +16,15 @@ function getFileInfo (resourcePath) {
// TODO: 调试时取个全名
var hash = require('hash-sum')
const cache = Object.create(null)
function getCompNameBySrc (file) {
return cache[file] || (cache[file] = `${getNameByFile(file)}$${hash(file)}`)
function getCompNameAndSrc (context, file) {
const filePath = `${relative(context, file).replace(/^src\//, '')}.wxml`
if (!cache[file]) {
cache[file] = hash(file)
}
return {
filePath,
name: cache[file]
}
}

// 根据路径获得组件名
Expand Down Expand Up @@ -138,7 +146,7 @@ module.exports = {
defaultStylePart,
cacheFileInfo,
getFileInfo,
getCompNameBySrc,
getCompNameAndSrc,
resolveTarget,
covertCCVar,
cacheSlots,
Expand Down
3 changes: 2 additions & 1 deletion lib/template-compiler/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ module.exports = function (html) {

var defaultModules = [transformRequire(options.transformToRequire, {
outputPath: this.options.output.path,
resourcePath: this.resourcePath
resourcePath: this.resourcePath,
context: this.options.context
})]

var userModules = vueOptions.compilerModules || options.compilerModules
Expand Down
12 changes: 6 additions & 6 deletions lib/template-compiler/modules/transform-require.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ function rewrite (attrsMap, name, fileOptions) {
if (value) {
var firstChar = value.charAt(0)
if (firstChar === '.') {
// 资源路径
var assetPath = path.resolve(path.dirname(fileOptions.resourcePath), value)
// 重写路径,为了避免重名,在webpack输出目录下新建copy-asset目录,资源保存到这里
var assetOutputPath = path.join('copy-asset', path.relative(process.cwd(), assetPath).replace(/^src/, ''))
attrsMap[name] = `/${assetOutputPath.split(path.sep).join('/')}`
copyAsset(assetPath, path.resolve(fileOptions.outputPath, assetOutputPath))
var { resourcePath, outputPath, context } = fileOptions
var assetPath = path.resolve(resourcePath, '..', value)
// 资源路径, 为了分包,去掉了 src 目录
var toPath = assetPath.replace(context, '').replace(/^\/src\//, '')
attrsMap[name] = path.join(outputPath, toPath)
copyAsset(assetPath, attrsMap[name])
}
}
}
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"postcss": "^6.0.6",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"relative": "^3.0.2",
"resolve": "^1.3.3",
"source-map": "^0.5.6",
"vue-hot-reload-api": "^2.1.0",
Expand Down