Skip to content

Commit 8d0d0dc

Browse files
anchengjiananchengjian
authored
Merge pull request #5 from mpvue/develop
Develop
2 parents 9318591 + 7a77740 commit 8d0d0dc

File tree

5 files changed

+108
-57
lines changed

5 files changed

+108
-57
lines changed

‎lib/loader.js‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,24 +45,10 @@ function getRawRequest (context, excludedPreLoaders) {
4545
})
4646
}
4747

48-
const mpPages = []
49-
const mpInfo = {}
50-
5148
module.exports = function (content) {
5249
// for mp
5350
// 针对 entry 的 main.js 处理 page 和 app 的入口文件和配置等
5451
const mpOptions = loaderUtils.getOptions(this) || {}
55-
if (!mpPages.length) {
56-
const { entry = {}} = this.options
57-
Object.keys(entry).forEach(k => {
58-
mpInfo[entry[k]] = k
59-
if (k !== 'app') {
60-
mpPages.push(`pages/${k}/${k}`)
61-
}
62-
})
63-
}
64-
mpOptions.pages = mpPages
65-
mpOptions.mpInfo = mpInfo
6652

6753
if (mpOptions.checkMPEntry) {
6854
return compileMP.call(this, content, mpOptions)

‎lib/mp-compiler/index.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
// for mp
22
const compiler = require('mpvue-template-compiler')
3-
const htmlBeautify = require('js-beautify').html
43

5-
const path = require('path')
64
const babel = require('babel-core')
75
const { parseConfig, parseComponentsDeps } = require('./parse')
86
const { genScript, genStyle, genPageWxml } = require('./templates')
97

10-
const { cacheFileInfo, getFileInfo, getCompNameBySrc, resolveTarget, covertCCVar, cacheSlots, getSlots } = require('./util')
11-
12-
const htmlBeautifyOptions = {
13-
wrap_line_length: '80',
14-
indent_size: 2,
15-
preserve_newlines: true,
16-
max_preserve_newlines: 0,
17-
e4x: true,
18-
unformatted: ['a', 'span', 'img', 'code', 'pre', 'sub', 'sup', 'em', 'strong', 'b', 'i', 'u', 'strike', 'big', 'small', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
19-
}
8+
const {
9+
cacheFileInfo,
10+
getFileInfo,
11+
getCompNameBySrc,
12+
resolveTarget,
13+
covertCCVar,
14+
cacheSlots,
15+
getSlots,
16+
htmlBeautify,
17+
getBabelrc,
18+
getPageSrc
19+
} = require('./util')
2020

2121
function createSlotsWxml (emitFile, slots) {
2222
cacheSlots(slots)
2323
const allSlots = getSlots()
2424
const content = Object.keys(allSlots).map(v => allSlots[v].code).join('\n')
2525
if (content.trim()) {
26-
emitFile('components/slots.wxml', htmlBeautify(content, htmlBeautifyOptions))
26+
emitFile('components/slots.wxml', htmlBeautify(content))
2727
}
2828
}
2929

@@ -47,7 +47,7 @@ function genComponentWxml (compiled, options, emitFile, emitError, emitWarning)
4747
mpTips.map(e => ` - ${e}`).join('\n') + '\n'
4848
)
4949
}
50-
return htmlBeautify(wxmlCodeStr, htmlBeautifyOptions)
50+
return htmlBeautify(wxmlCodeStr)
5151
}
5252

5353
function createWxml (emitWarning, emitError, emitFile, resourcePath, rootComponent, compiled, html) {
@@ -63,7 +63,7 @@ function createWxml (emitWarning, emitError, emitFile, resourcePath, rootCompone
6363

6464
if (rootComponent) {
6565
const componentName = getCompNameBySrc(rootComponent)
66-
wxmlContent = genPageWxml(componentName)
66+
wxmlContent = genPageWxml(componentName, src)
6767
wxmlSrc = src
6868
} else {
6969
// TODO, 这儿传 options 进去
@@ -91,8 +91,8 @@ function compileWxml (compiled, html) {
9191

9292
// 针对 .vue 单文件的脚本逻辑的处理
9393
// 处理出当前单文件组件的子组件依赖
94-
function compileMPScript (script, optioins, moduleId) {
95-
const babelrc = optioins.globalBabelrc ? optioins.globalBabelrc : path.resolve('./.babelrc')
94+
function compileMPScript (script, mpOptioins, moduleId) {
95+
const babelrc = getBabelrc(mpOptioins.globalBabelrc)
9696
const { metadata } = babel.transform(script.content, { extends: babelrc, plugins: [parseComponentsDeps] })
9797

9898
// metadata: importsMap, components
@@ -124,7 +124,7 @@ function compileMPScript (script, optioins, moduleId) {
124124
components.isCompleted = true
125125
}
126126

127-
const fileInfo = resolveTarget(this.resourcePath, optioins.mpInfo)
127+
const fileInfo = resolveTarget(this.resourcePath, this.options.entry)
128128
cacheFileInfo(this.resourcePath, fileInfo, { importsMap, components, moduleId })
129129

130130
return script
@@ -135,16 +135,16 @@ function compileMPScript (script, optioins, moduleId) {
135135

136136
const startPageReg = /^\^/
137137

138-
function compileMP (content, optioins) {
139-
const { resourcePath, emitError, emitFile, emitWarning, resolve, context } = this
138+
function compileMP (content, mpOptioins) {
139+
const { resourcePath, emitError, emitFile, emitWarning, resolve, context, options } = this
140140

141-
const babelrc = optioins.globalBabelrc ? optioins.globalBabelrc : path.resolve('./.babelrc')
141+
const babelrc = getBabelrc(mpOptioins.globalBabelrc)
142142
const { metadata } = babel.transform(content, { extends: babelrc, plugins: [parseConfig] })
143143

144144
// metadata: config
145145
const { config, rootComponent } = metadata
146146

147-
const fileInfo = resolveTarget(resourcePath, optioins.mpInfo)
147+
const fileInfo = resolveTarget(resourcePath, options.entry)
148148
cacheFileInfo(resourcePath, fileInfo)
149149
const { src, name, isApp, isPage } = fileInfo
150150

@@ -155,7 +155,7 @@ function compileMP (content, optioins) {
155155

156156
// 只有 app 才处理 pages
157157
if (isApp) {
158-
const pages = (configObj.pages || []).concat(optioins.pages)
158+
const pages = Object.keys(options.entry).concat(configObj.pages).filter(v => v && v !== 'app').map(getPageSrc)
159159

160160
// ^ 开头的放在第一个
161161
const startPageIndex = pages.findIndex(v => startPageReg.test(v))
@@ -170,10 +170,10 @@ function compileMP (content, optioins) {
170170
}
171171

172172
// 生成入口 js
173-
emitFile(`${src}.js`, genScript(name, isPage))
173+
emitFile(`${src}.js`, genScript(name, isPage, src))
174174

175175
// 生成入口 wxss
176-
emitFile(`${src}.wxss`, genStyle(name, isPage))
176+
emitFile(`${src}.wxss`, genStyle(name, isPage, src))
177177

178178
// 这儿应该异步在所有的模块都清晰后再生成
179179
// 生成入口 wxml

‎lib/mp-compiler/templates.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
1-
function genScript (name, isPage) {
2-
const prefix = isPage ? '../..' : '.'
1+
const { getPathPrefix } = require('./util')
2+
3+
function genScript (name, isPage, src) {
4+
const prefix = isPage ? getPathPrefix(src) : '.'
35

46
return `
5-
import '${prefix}/static/js/manifest'
6-
import '${prefix}/static/js/vendor'
7-
import '${prefix}/static/js/${name}'
8-
`
7+
require('${prefix}/static/js/manifest')
8+
require('${prefix}/static/js/vendor')
9+
require('${prefix}/static/js/${name}')
10+
`
911
}
1012

11-
function genStyle (name, isPage) {
12-
const prefix = isPage ? '../..' : '.'
13+
function genStyle (name, isPage, src) {
14+
const prefix = isPage ? getPathPrefix(src) : '.'
1315
return `@import "${prefix}/static/css/${name}.wxss";`
1416
}
1517

16-
function genPageWxml (templateName) {
17-
return `<import src="../../components/${templateName}" /><template is="${templateName}" data="{{ ...$root['0'], $root }}"/>`
18+
function genPageWxml (templateName, src) {
19+
return `<import src="${getPathPrefix(src)}components/${templateName}" /><template is="${templateName}" data="{{ ...$root['0'], $root }}"/>`
1820
}
1921

2022
module.exports = { genScript, genStyle, genPageWxml }

‎lib/mp-compiler/util.js‎

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const path = require('path')
2+
const fs = require('fs')
23

34
const pagesNameMap = Object.create(null)
45

@@ -28,17 +29,32 @@ function getNameByFile (dir) {
2829
return path.parse(dir).name
2930
}
3031

32+
function getKeyFromObjByVal (obj, val) {
33+
for (const i in obj) {
34+
if (obj[i] === val) {
35+
return i
36+
}
37+
}
38+
}
39+
40+
function getPageSrc (pageName) {
41+
return path.parse(pageName).dir ? pageName : `pages/${pageName}/${pageName}`
42+
}
43+
44+
// TODO, 这儿应该按照 main.js 导出的 config 来进行 isApp isPage 识别，暂时不改，下次大版本升级 loader 的时候改
3145
// 计算目标输出的路径等信息
3246
// pageType 默认为 null === component, 目前共 3 种类型: component, app, page
33-
function resolveTarget (dir, mpInfo = {}) {
34-
const originName = mpInfo[dir]
47+
function resolveTarget (dir, entry) {
48+
const originName = getKeyFromObjByVal(entry, dir)
3549
const name = originName || getNameByFile(dir)
3650
const isApp = name === 'app'
3751
const pageType = isApp ? 'app' : (originName ? 'page' : 'component')
3852
const isPage = pageType === 'page'
3953

40-
// components 目录暂时无用
41-
const src = isApp ? 'app' : isPage ? `pages/${name}/${name}` : `components/${name}`
54+
let src = 'app'
55+
if (isPage) {
56+
src = getPageSrc(name)
57+
}
4258

4359
return { pageType, src, name, isApp, isPage }
4460
}
@@ -63,4 +79,51 @@ function getSlots (slotName) {
6379
return slotName ? slotsCache[slotName] : slotsCache
6480
}
6581

66-
module.exports = { cacheFileInfo, getFileInfo, getCompNameBySrc, resolveTarget, covertCCVar, cacheSlots, getSlots }
82+
// 包大小优化: build 模式不需要美化 wxml
83+
const jsBeautify = require('js-beautify')
84+
const isProduction = process.env.NODE_ENV === 'production'
85+
function htmlBeautify (content) {
86+
const htmlBeautifyOptions = {
87+
// wrap_line_length: '80',
88+
indent_size: 2,
89+
preserve_newlines: false,
90+
max_preserve_newlines: 0,
91+
e4x: true,
92+
unformatted: ['a', 'span', 'img', 'code', 'pre', 'sub', 'sup', 'em', 'strong', 'b', 'i', 'u', 'strike', 'big', 'small', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
93+
}
94+
95+
if (isProduction) {
96+
return content
97+
}
98+
return jsBeautify.html(content, htmlBeautifyOptions)
99+
}
100+
101+
function getBabelrc (src) {
102+
if (src && fs.existsSync(src)) {
103+
return src
104+
}
105+
const curBabelRc = path.resolve('./.babelrc')
106+
if (fs.existsSync(curBabelRc)) {
107+
return curBabelRc
108+
}
109+
return ''
110+
}
111+
112+
function getPathPrefix (src) {
113+
const length = src.split('/').length - 1
114+
return `${'../'.repeat(length)}`
115+
}
116+
117+
module.exports = {
118+
cacheFileInfo,
119+
getFileInfo,
120+
getCompNameBySrc,
121+
resolveTarget,
122+
covertCCVar,
123+
cacheSlots,
124+
getSlots,
125+
htmlBeautify,
126+
getBabelrc,
127+
getPathPrefix,
128+
getPageSrc
129+
}

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mpvue-loader",
3-
"version": "1.0.2",
3+
"version": "1.0.6",
44
"description": "mpvue single-file component loader for Webpack",
55
"main": "index.js",
66
"repository": {
@@ -67,7 +67,7 @@
6767
},
6868
"peerDependencies": {
6969
"css-loader": "*",
70-
"mpvue-template-compiler": "^1.0.1"
70+
"mpvue-template-compiler": "^1.0.5"
7171
},
7272
"devDependencies": {
7373
"babel-core": "^6.25.0",
@@ -90,7 +90,7 @@
9090
"marked": "^0.3.6",
9191
"memory-fs": "^0.4.1",
9292
"mkdirp": "^0.5.1",
93-
"mpvue-template-compiler": "^1.0.1",
93+
"mpvue-template-compiler": "^1.0.5",
9494
"mocha": "^3.4.2",
9595
"node-libs-browser": "^2.0.0",
9696
"normalize-newline": "^3.0.0",

0 commit comments

Comments
 (0)