@mpxjs/webpack-plugin 2.9.17 → 2.9.19-react.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/lib/config.js +59 -97
  2. package/lib/dependencies/ResolveDependency.js +2 -2
  3. package/lib/helpers.js +5 -1
  4. package/lib/index.js +27 -19
  5. package/lib/loader.js +56 -118
  6. package/lib/native-loader.js +43 -20
  7. package/lib/platform/index.js +3 -0
  8. package/lib/platform/style/wx/index.js +413 -0
  9. package/lib/platform/template/wx/component-config/button.js +36 -0
  10. package/lib/platform/template/wx/component-config/cover-view.js +1 -1
  11. package/lib/platform/template/wx/component-config/image.js +15 -0
  12. package/lib/platform/template/wx/component-config/input.js +36 -0
  13. package/lib/platform/template/wx/component-config/scroll-view.js +27 -1
  14. package/lib/platform/template/wx/component-config/swiper-item.js +13 -1
  15. package/lib/platform/template/wx/component-config/swiper.js +25 -1
  16. package/lib/platform/template/wx/component-config/text.js +17 -1
  17. package/lib/platform/template/wx/component-config/textarea.js +39 -0
  18. package/lib/platform/template/wx/component-config/unsupported.js +18 -0
  19. package/lib/platform/template/wx/component-config/view.js +15 -1
  20. package/lib/platform/template/wx/index.js +89 -7
  21. package/lib/react/index.js +92 -0
  22. package/lib/react/processJSON.js +362 -0
  23. package/lib/react/processScript.js +40 -0
  24. package/lib/react/processStyles.js +63 -0
  25. package/lib/react/processTemplate.js +151 -0
  26. package/lib/react/script-helper.js +79 -0
  27. package/lib/react/style-helper.js +91 -0
  28. package/lib/runtime/components/react/event.config.ts +32 -0
  29. package/lib/runtime/components/react/getInnerListeners.ts +289 -0
  30. package/lib/runtime/components/react/getInnerListeners.type.ts +68 -0
  31. package/lib/runtime/components/react/mpx-button.tsx +402 -0
  32. package/lib/runtime/components/react/mpx-image/index.tsx +351 -0
  33. package/lib/runtime/components/react/mpx-image/svg.tsx +21 -0
  34. package/lib/runtime/components/react/mpx-input.tsx +389 -0
  35. package/lib/runtime/components/react/mpx-scroll-view.tsx +412 -0
  36. package/lib/runtime/components/react/mpx-swiper/carouse.tsx +407 -0
  37. package/lib/runtime/components/react/mpx-swiper/index.tsx +68 -0
  38. package/lib/runtime/components/react/mpx-swiper/type.ts +69 -0
  39. package/lib/runtime/components/react/mpx-swiper-item.tsx +42 -0
  40. package/lib/runtime/components/react/mpx-text.tsx +106 -0
  41. package/lib/runtime/components/react/mpx-textarea.tsx +46 -0
  42. package/lib/runtime/components/react/mpx-view.tsx +397 -0
  43. package/lib/runtime/components/react/utils.ts +92 -0
  44. package/lib/runtime/components/web/event.js +100 -0
  45. package/lib/runtime/components/web/getInnerListeners.js +0 -78
  46. package/lib/runtime/components/web/mpx-button.vue +1 -1
  47. package/lib/runtime/components/web/mpx-navigator.vue +1 -1
  48. package/lib/runtime/components/web/mpx-scroll-view.vue +113 -37
  49. package/lib/runtime/oc.wxs +16 -0
  50. package/lib/runtime/optionProcessor.js +1 -1
  51. package/lib/runtime/stringify.wxs +3 -7
  52. package/lib/runtime/useNodesRef.ts +39 -0
  53. package/lib/style-compiler/index.js +2 -1
  54. package/lib/template-compiler/compiler.js +544 -121
  55. package/lib/template-compiler/gen-node-react.js +95 -0
  56. package/lib/template-compiler/index.js +19 -31
  57. package/lib/utils/env.js +17 -0
  58. package/lib/utils/make-map.js +1 -1
  59. package/lib/utils/shallow-stringify.js +17 -0
  60. package/lib/utils/ts-loader-watch-run-loader-filter.js +4 -1
  61. package/lib/web/index.js +122 -0
  62. package/lib/web/processMainScript.js +6 -4
  63. package/lib/web/processScript.js +9 -5
  64. package/lib/web/processTemplate.js +14 -14
  65. package/lib/web/script-helper.js +11 -19
  66. package/package.json +7 -3
package/lib/config.js CHANGED
@@ -1,3 +1,51 @@
1
+ const reactConfig = {
2
+ event: {
3
+ parseEvent (attr) {
4
+ const match = /^(bind|catch|capture-bind|capture-catch):?(.*?)(?:\.(.*))?$/.exec(attr)
5
+ if (match) {
6
+ return {
7
+ prefix: match[1],
8
+ eventName: match[2].replace(/^./, function (match) {
9
+ return match.toLowerCase()
10
+ }),
11
+ modifier: match[3]
12
+ }
13
+ }
14
+ },
15
+ getEvent (eventName, prefix = 'bind') {
16
+ return prefix + eventName
17
+ },
18
+ defaultModelProp: 'value',
19
+ defaultModelEvent: 'input',
20
+ defaultModelValuePath: 'value'
21
+ },
22
+ wxs: {
23
+ tag: 'wxs',
24
+ module: 'module',
25
+ src: 'src',
26
+ ext: '.wxs',
27
+ templatePrefix: 'module.exports = \n'
28
+ },
29
+ directive: {
30
+ if: 'wx:if',
31
+ elseif: 'wx:elif',
32
+ else: 'wx:else',
33
+ model: 'wx:model',
34
+ modelProp: 'wx:model-prop',
35
+ modelEvent: 'wx:model-event',
36
+ modelValuePath: 'wx:model-value-path',
37
+ modelFilter: 'wx:model-filter',
38
+ for: 'wx:for',
39
+ forIndex: 'wx:for-index',
40
+ forItem: 'wx:for-item',
41
+ key: 'wx:key',
42
+ dynamicClass: 'wx:class',
43
+ dynamicStyle: 'wx:style',
44
+ ref: 'wx:ref',
45
+ show: 'wx:show'
46
+ }
47
+ }
48
+
1
49
  module.exports = {
2
50
  wx: {
3
51
  typeExtMap: {
@@ -27,18 +75,7 @@ module.exports = {
27
75
  },
28
76
  defaultModelProp: 'value',
29
77
  defaultModelEvent: 'input',
30
- defaultModelValuePath: 'value',
31
- shallowStringify (obj) {
32
- const arr = []
33
- for (const key in obj) {
34
- let value = obj[key]
35
- if (Array.isArray(value)) {
36
- value = `[${value.join(',')}]`
37
- }
38
- arr.push(`${key}:${value}`)
39
- }
40
- return ` {${arr.join(',')}} `
41
- }
78
+ defaultModelValuePath: 'value'
42
79
  },
43
80
  wxs: {
44
81
  tag: 'wxs',
@@ -101,18 +138,7 @@ module.exports = {
101
138
  },
102
139
  defaultModelProp: 'value',
103
140
  defaultModelEvent: 'input',
104
- defaultModelValuePath: 'value',
105
- shallowStringify (obj) {
106
- const arr = []
107
- for (const key in obj) {
108
- let value = obj[key]
109
- if (Array.isArray(value)) {
110
- value = `[${value.join(',')}]`
111
- }
112
- arr.push(`${key}:${value}`)
113
- }
114
- return ` {${arr.join(',')}} `
115
- }
141
+ defaultModelValuePath: 'value'
116
142
  },
117
143
  wxs: {
118
144
  tag: 'import-sjs',
@@ -169,18 +195,7 @@ module.exports = {
169
195
  },
170
196
  defaultModelProp: 'value',
171
197
  defaultModelEvent: 'input',
172
- defaultModelValuePath: 'value',
173
- shallowStringify (obj) {
174
- const arr = []
175
- for (const key in obj) {
176
- let value = obj[key]
177
- if (Array.isArray(value)) {
178
- value = `[${value.join(',')}]`
179
- }
180
- arr.push(`${key}:${value}`)
181
- }
182
- return ` {${arr.join(',')}} `
183
- }
198
+ defaultModelValuePath: 'value'
184
199
  },
185
200
  wxs: {
186
201
  tag: 'import-sjs',
@@ -236,18 +251,7 @@ module.exports = {
236
251
  },
237
252
  defaultModelProp: 'value',
238
253
  defaultModelEvent: 'input',
239
- defaultModelValuePath: 'value',
240
- shallowStringify (obj) {
241
- const arr = []
242
- for (const key in obj) {
243
- let value = obj[key]
244
- if (Array.isArray(value)) {
245
- value = `[${value.join(',')}]`
246
- }
247
- arr.push(`${key}:${value}`)
248
- }
249
- return `({${arr.join(',')}})`
250
- }
254
+ defaultModelValuePath: 'value'
251
255
  },
252
256
  wxs: {
253
257
  tag: 'qs',
@@ -303,18 +307,7 @@ module.exports = {
303
307
  },
304
308
  defaultModelProp: 'value',
305
309
  defaultModelEvent: 'input',
306
- defaultModelValuePath: 'value',
307
- shallowStringify (obj) {
308
- const arr = []
309
- for (const key in obj) {
310
- let value = obj[key]
311
- if (Array.isArray(value)) {
312
- value = `[${value.join(',')}]`
313
- }
314
- arr.push(`${key}:${value}`)
315
- }
316
- return ` {${arr.join(',')}} `
317
- }
310
+ defaultModelValuePath: 'value'
318
311
  },
319
312
  wxs: {
320
313
  tag: 'sjs',
@@ -384,18 +377,7 @@ module.exports = {
384
377
  },
385
378
  defaultModelProp: 'value',
386
379
  defaultModelEvent: 'input',
387
- defaultModelValuePath: 'value',
388
- shallowStringify (obj) {
389
- const arr = []
390
- for (const key in obj) {
391
- let value = obj[key]
392
- if (Array.isArray(value)) {
393
- value = `[${value.join(',')}]`
394
- }
395
- arr.push(`${key}:${value}`)
396
- }
397
- return ` {${arr.join(',')}} `
398
- }
380
+ defaultModelValuePath: 'value'
399
381
  },
400
382
  wxs: {
401
383
  tag: 'qjs',
@@ -451,18 +433,7 @@ module.exports = {
451
433
  },
452
434
  defaultModelProp: 'value',
453
435
  defaultModelEvent: 'input',
454
- defaultModelValuePath: 'value',
455
- shallowStringify (obj) {
456
- const arr = []
457
- for (const key in obj) {
458
- let value = obj[key]
459
- if (Array.isArray(value)) {
460
- value = `[${value.join(',')}]`
461
- }
462
- arr.push(`${key}:${value}`)
463
- }
464
- return ` {${arr.join(',')}} `
465
- }
436
+ defaultModelValuePath: 'value'
466
437
  },
467
438
  wxs: {
468
439
  tag: 'jds',
@@ -518,18 +489,7 @@ module.exports = {
518
489
  },
519
490
  defaultModelProp: 'value',
520
491
  defaultModelEvent: 'input',
521
- defaultModelValuePath: 'value',
522
- shallowStringify (obj) {
523
- const arr = []
524
- for (const key in obj) {
525
- let value = obj[key]
526
- if (Array.isArray(value)) {
527
- value = `[${value.join(',')}]`
528
- }
529
- arr.push(`${key}:${value}`)
530
- }
531
- return ` {${arr.join(',')}} `
532
- }
492
+ defaultModelValuePath: 'value'
533
493
  },
534
494
  wxs: {
535
495
  tag: 'dds',
@@ -556,5 +516,7 @@ module.exports = {
556
516
  ref: 'dd:ref',
557
517
  show: 'dd:show'
558
518
  }
559
- }
519
+ },
520
+ ios: reactConfig,
521
+ android: reactConfig
560
522
  }
@@ -27,7 +27,7 @@ class ResolveDependency extends NullDependency {
27
27
  if (!compilation) return ''
28
28
  const mpx = compilation.__mpx__
29
29
  if (!mpx) return ''
30
- const { pagesMap, componentsMap, staticResourcesMap, partialCompile } = mpx
30
+ const { pagesMap, componentsMap, staticResourcesMap, partialCompileRule } = mpx
31
31
  const { resourcePath } = parseRequest(resource)
32
32
  const currentComponentsMap = componentsMap[packageName]
33
33
  const mainComponentsMap = componentsMap.main
@@ -35,7 +35,7 @@ class ResolveDependency extends NullDependency {
35
35
  const mainStaticResourcesMap = staticResourcesMap.main
36
36
  const resolveResult = pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
37
37
  if (!resolveResult) {
38
- if (!partialCompile || matchCondition(resourcePath, partialCompile)) {
38
+ if (!partialCompileRule || matchCondition(resourcePath, partialCompileRule)) {
39
39
  compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
40
40
  }
41
41
  }
package/lib/helpers.js CHANGED
@@ -19,7 +19,7 @@ module.exports = function createHelpers (loaderContext) {
19
19
 
20
20
  const { mode, env } = loaderContext.getMpx() || {}
21
21
 
22
- function getRequire (type, part, extraOptions, index) {
22
+ function getRequire (type, part, extraOptions = {}, index = 0) {
23
23
  let extract = false
24
24
  switch (type) {
25
25
  // eslint-disable-next-line no-fallthrough
@@ -28,6 +28,8 @@ module.exports = function createHelpers (loaderContext) {
28
28
  case 'template':
29
29
  extract = true
30
30
  }
31
+ // 允许外部强制关闭extract
32
+ if (extraOptions.extract === false) extract = false
31
33
  return (extract ? 'require.extract(' : 'require(') + getRequestString(type, part, extraOptions, index) + ')'
32
34
  }
33
35
 
@@ -70,6 +72,8 @@ module.exports = function createHelpers (loaderContext) {
70
72
  case 'template':
71
73
  options.extract = true
72
74
  }
75
+ // 允许外部强制关闭extract
76
+ if (extraOptions.extract === false) delete options.extract
73
77
 
74
78
  if (part.mode) options.mode = part.mode
75
79
 
package/lib/index.js CHANGED
@@ -46,6 +46,7 @@ const { matchCondition } = require('./utils/match-condition')
46
46
  const processDefs = require('./utils/process-defs')
47
47
  const config = require('./config')
48
48
  const hash = require('hash-sum')
49
+ const nativeLoaderPath = normalize.lib('native-loader')
49
50
  const wxssLoaderPath = normalize.lib('wxss/index')
50
51
  const wxmlLoaderPath = normalize.lib('wxml/loader')
51
52
  const wxsLoaderPath = normalize.lib('wxs/loader')
@@ -61,6 +62,7 @@ const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource'
61
62
  const emitFile = require('./utils/emit-file')
62
63
  const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/const')
63
64
  const isEmptyObject = require('./utils/is-empty-object')
65
+ const { isReact, isWeb } = require('./utils/env')
64
66
  require('./utils/check-core-version-match')
65
67
 
66
68
  const isProductionLikeMode = options => {
@@ -118,9 +120,12 @@ class MpxWebpackPlugin {
118
120
  if (options.mode !== options.srcMode && options.srcMode !== 'wx') {
119
121
  errors.push('MpxWebpackPlugin supports srcMode to be "wx" only temporarily!')
120
122
  }
121
- if (options.mode === 'web' && options.srcMode !== 'wx') {
123
+ if (isWeb(options.mode) && options.srcMode !== 'wx') {
122
124
  errors.push('MpxWebpackPlugin supports mode to be "web" only when srcMode is set to "wx"!')
123
125
  }
126
+ if (isReact(options.mode) && options.srcMode !== 'wx') {
127
+ errors.push('MpxWebpackPlugin supports mode to be "ios" or "android" only when srcMode is set to "wx"!')
128
+ }
124
129
  options.externalClasses = options.externalClasses || ['custom-class', 'i-class']
125
130
  options.resolveMode = options.resolveMode || 'webpack'
126
131
  options.writeMode = options.writeMode || 'changed'
@@ -167,11 +172,10 @@ class MpxWebpackPlugin {
167
172
  cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
168
173
  }, options.nativeConfig)
169
174
  options.webConfig = options.webConfig || {}
170
- options.partialCompile = options.mode !== 'web' && options.partialCompile
175
+ options.partialCompileRule = options.partialCompileRule || {}
171
176
  options.asyncSubpackageRules = options.asyncSubpackageRules || []
172
177
  options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
173
178
  options.retryRequireAsync = options.retryRequireAsync || false
174
- options.enableAliRequireAsync = options.enableAliRequireAsync || false
175
179
  options.optimizeSize = options.optimizeSize || false
176
180
  this.options = options
177
181
  // Hack for buildDependencies
@@ -196,7 +200,7 @@ class MpxWebpackPlugin {
196
200
 
197
201
  static nativeLoader (options = {}) {
198
202
  return {
199
- loader: normalize.lib('native-loader'),
203
+ loader: nativeLoaderPath,
200
204
  options
201
205
  }
202
206
  }
@@ -251,6 +255,10 @@ class MpxWebpackPlugin {
251
255
  return addQuery(request, { isComponent: true })
252
256
  }
253
257
 
258
+ static getNativeEntry (request) {
259
+ return `!!${nativeLoaderPath}!${request}`
260
+ }
261
+
254
262
  static getPluginEntry (request) {
255
263
  return addQuery(request, {
256
264
  mpx: true,
@@ -287,7 +295,7 @@ class MpxWebpackPlugin {
287
295
  // 将entry export标记为used且不可mangle,避免require.async生成的js chunk在生产环境下报错
288
296
  new FlagEntryExportAsUsedPlugin(true, 'entry').apply(compiler)
289
297
 
290
- if (this.options.mode !== 'web') {
298
+ if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
291
299
  // 强制设置publicPath为'/'
292
300
  if (compiler.options.output.publicPath && compiler.options.output.publicPath !== publicPath) {
293
301
  warnings.push(`webpack options: MpxWebpackPlugin accept options.output.publicPath to be ${publicPath} only, custom options.output.publicPath will be ignored!`)
@@ -327,7 +335,7 @@ class MpxWebpackPlugin {
327
335
  compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
328
336
 
329
337
  const optimization = compiler.options.optimization
330
- if (this.options.mode !== 'web') {
338
+ if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
331
339
  optimization.runtimeChunk = {
332
340
  name: (entrypoint) => {
333
341
  for (const packageName in mpx.independentSubpackagesMap) {
@@ -343,7 +351,7 @@ class MpxWebpackPlugin {
343
351
  let splitChunksOptions = null
344
352
  let splitChunksPlugin = null
345
353
  // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
346
- if (optimization.splitChunks !== false) {
354
+ if (optimization.splitChunks !== false && !isReact(this.options.mode)) {
347
355
  splitChunksOptions = Object.assign({
348
356
  chunks: 'all',
349
357
  usedExports: optimization.usedExports === true,
@@ -401,7 +409,7 @@ class MpxWebpackPlugin {
401
409
 
402
410
  let mpx
403
411
 
404
- if (this.options.partialCompile) {
412
+ if (this.options.partialCompileRule && this.options.partialCompileRule.include) {
405
413
  function isResolvingPage (obj) {
406
414
  // valid query should start with '?'
407
415
  const query = parseQuery(obj.query || '?')
@@ -419,7 +427,7 @@ class MpxWebpackPlugin {
419
427
  if (obj.path.startsWith(require.resolve('./runtime/components/wx/default-page.mpx'))) {
420
428
  return callback(null, obj)
421
429
  }
422
- if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompile)) {
430
+ if (isResolvingPage(obj) && !matchCondition(obj.path, this.options.partialCompileRule)) {
423
431
  const infix = obj.query ? '&' : '?'
424
432
  obj.query += `${infix}resourcePath=${obj.path}`
425
433
  obj.path = require.resolve('./runtime/components/wx/default-page.mpx')
@@ -644,8 +652,8 @@ class MpxWebpackPlugin {
644
652
  useRelativePath: this.options.useRelativePath,
645
653
  removedChunks: [],
646
654
  forceProxyEventRules: this.options.forceProxyEventRules,
647
- supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'web' || (this.options.mode === 'ali' && this.options.enableAliRequireAsync),
648
- partialCompile: this.options.partialCompile,
655
+ supportRequireAsync: this.options.mode === 'wx' || this.options.mode === 'ali' || isWeb(this.options.mode),
656
+ partialCompileRule: this.options.partialCompileRule,
649
657
  collectDynamicEntryInfo: ({ resource, packageName, filename, entryType }) => {
650
658
  const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
651
659
  hasPage: false,
@@ -968,7 +976,7 @@ class MpxWebpackPlugin {
968
976
  // 自动使用分包配置修改splitChunksPlugin配置
969
977
  if (splitChunksPlugin) {
970
978
  let needInit = false
971
- if (mpx.mode === 'web') {
979
+ if (isWeb(mpx.mode)) {
972
980
  // web独立处理splitChunk
973
981
  if (!hasOwn(splitChunksOptions.cacheGroups, 'main')) {
974
982
  splitChunksOptions.cacheGroups.main = {
@@ -1002,7 +1010,7 @@ class MpxWebpackPlugin {
1002
1010
 
1003
1011
  JavascriptModulesPlugin.getCompilationHooks(compilation).renderModuleContent.tap('MpxWebpackPlugin', (source, module, renderContext) => {
1004
1012
  // 处理dll产生的external模块
1005
- if (module.external && module.userRequest.startsWith('dll-reference ') && mpx.mode !== 'web') {
1013
+ if (module.external && module.userRequest.startsWith('dll-reference ') && !isWeb(mpx.mode) && !isReact(mpx.mode)) {
1006
1014
  const chunk = renderContext.chunk
1007
1015
  const request = module.request
1008
1016
  let relativePath = toPosix(path.relative(path.dirname(chunk.name), request))
@@ -1121,9 +1129,9 @@ class MpxWebpackPlugin {
1121
1129
  if (tarRoot) {
1122
1130
  // 删除root query
1123
1131
  if (queryObj.root) request = addQuery(request, {}, false, ['root'])
1124
- // wx、ali(需开启enableAliRequireAsync)和web平台支持require.async,其余平台使用CommonJsAsyncDependency进行模拟抹平
1132
+ // wx、ali和web平台支持require.async,其余平台使用CommonJsAsyncDependency进行模拟抹平
1125
1133
  if (mpx.supportRequireAsync) {
1126
- if (mpx.mode === 'web') {
1134
+ if (isWeb(mpx.mode)) {
1127
1135
  const depBlock = new AsyncDependenciesBlock(
1128
1136
  {
1129
1137
  name: tarRoot
@@ -1328,8 +1336,8 @@ class MpxWebpackPlugin {
1328
1336
  parser.hooks.call.for('App').tap('MpxWebpackPlugin', (expr) => {
1329
1337
  transGlobalObject(expr.callee)
1330
1338
  })
1331
- if (mpx.mode === 'ali' || mpx.mode === 'web') {
1332
- // 支付宝和web不支持Behaviors
1339
+ if (mpx.mode === 'ali' || isWeb(mpx.mode) || isReact(mpx.mode)) {
1340
+ // 支付宝、web和react不支持Behaviors
1333
1341
  parser.hooks.call.for('Behavior').tap('MpxWebpackPlugin', (expr) => {
1334
1342
  transGlobalObject(expr.callee)
1335
1343
  })
@@ -1346,7 +1354,7 @@ class MpxWebpackPlugin {
1346
1354
  name: 'MpxWebpackPlugin',
1347
1355
  stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
1348
1356
  }, () => {
1349
- if (mpx.mode === 'web') return
1357
+ if (isWeb(mpx.mode) || isReact(mpx.mode)) return
1350
1358
 
1351
1359
  if (this.options.generateBuildMap) {
1352
1360
  const pagesMap = compilation.__mpx__.pagesMap
@@ -1585,7 +1593,7 @@ try {
1585
1593
  createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
1586
1594
  }
1587
1595
 
1588
- if (mpx.mode === 'web') {
1596
+ if (isWeb(mpx.mode)) {
1589
1597
  const mpxStyleOptions = queryObj.mpxStyleOptions
1590
1598
  const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
1591
1599
  const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
package/lib/loader.js CHANGED
@@ -5,21 +5,18 @@ const parseRequest = require('./utils/parse-request')
5
5
  const { matchCondition } = require('./utils/match-condition')
6
6
  const addQuery = require('./utils/add-query')
7
7
  const async = require('async')
8
- const processJSON = require('./web/processJSON')
9
- const processScript = require('./web/processScript')
10
- const processStyles = require('./web/processStyles')
11
- const processTemplate = require('./web/processTemplate')
12
8
  const getJSONContent = require('./utils/get-json-content')
13
9
  const normalize = require('./utils/normalize')
14
10
  const getEntryName = require('./utils/get-entry-name')
15
11
  const AppEntryDependency = require('./dependencies/AppEntryDependency')
16
12
  const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
17
- const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
18
13
  const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
19
14
  const tsWatchRunLoaderFilter = require('./utils/ts-loader-watch-run-loader-filter')
20
15
  const { MPX_APP_MODULE_ID } = require('./utils/const')
16
+ const { isReact } = require('./utils/env')
21
17
  const path = require('path')
22
- const processMainScript = require('./web/processMainScript')
18
+ const processWeb = require('./web')
19
+ const processReact = require('./react')
23
20
  const getRulesRunner = require('./platform')
24
21
 
25
22
  module.exports = function (content) {
@@ -50,7 +47,6 @@ module.exports = function (content) {
50
47
  const localSrcMode = queryObj.mode
51
48
  const srcMode = localSrcMode || globalSrcMode
52
49
  const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
53
- const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
54
50
 
55
51
  const emitWarning = (msg) => {
56
52
  this.emitWarning(
@@ -64,14 +60,11 @@ module.exports = function (content) {
64
60
  )
65
61
  }
66
62
 
67
- let ctorType = 'app'
68
- if (pagesMap[resourcePath]) {
69
- // page
70
- ctorType = 'page'
71
- } else if (componentsMap[resourcePath]) {
72
- // component
73
- ctorType = 'component'
74
- }
63
+ let ctorType = pagesMap[resourcePath]
64
+ ? 'page'
65
+ : componentsMap[resourcePath]
66
+ ? 'component'
67
+ : 'app'
75
68
 
76
69
  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
77
70
  if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
@@ -100,7 +93,6 @@ module.exports = function (content) {
100
93
  getRequire
101
94
  } = createHelpers(loaderContext)
102
95
 
103
- let output = ''
104
96
  const callback = this.async()
105
97
 
106
98
  async.waterfall([
@@ -130,7 +122,7 @@ module.exports = function (content) {
130
122
  warn: emitWarning,
131
123
  error: emitError
132
124
  }
133
- if (!isApp) {
125
+ if (ctorType !== 'app') {
134
126
  rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
135
127
  }
136
128
  const rulesRunner = getRulesRunner(rulesRunnerOptions)
@@ -152,98 +144,47 @@ module.exports = function (content) {
152
144
  }
153
145
  // 处理mode为web时输出vue格式文件
154
146
  if (mode === 'web') {
155
- if (ctorType === 'app' && !queryObj.isApp) {
156
- return async.waterfall([
157
- (callback) => {
158
- processJSON(parts.json, { loaderContext, pagesMap, componentsMap }, callback)
159
- },
160
- (jsonRes, callback) => {
161
- processMainScript(parts.script, {
162
- loaderContext,
163
- ctorType,
164
- srcMode,
165
- moduleId,
166
- isProduction,
167
- jsonConfig: jsonRes.jsonObj,
168
- outputPath: queryObj.outputPath || '',
169
- localComponentsMap: jsonRes.localComponentsMap,
170
- tabBar: jsonRes.jsonObj.tabBar,
171
- tabBarMap: jsonRes.tabBarMap,
172
- tabBarStr: jsonRes.tabBarStr,
173
- localPagesMap: jsonRes.localPagesMap,
174
- resource: this.resource
175
- }, callback)
176
- }
177
- ], (err, scriptRes) => {
178
- if (err) return callback(err)
179
- this.loaderIndex = -1
180
- return callback(null, scriptRes.output)
181
- })
182
- }
183
- // 通过RecordVueContentDependency和vueContentCache确保子request不再重复生成vueContent
184
- const cacheContent = mpx.vueContentCache.get(filePath)
185
- if (cacheContent) return callback(null, cacheContent)
186
-
187
- return async.waterfall([
188
- (callback) => {
189
- async.parallel([
190
- (callback) => {
191
- processTemplate(parts.template, {
192
- loaderContext,
193
- hasScoped,
194
- hasComment,
195
- isNative,
196
- srcMode,
197
- moduleId,
198
- ctorType,
199
- usingComponents,
200
- componentGenerics
201
- }, callback)
202
- },
203
- (callback) => {
204
- processStyles(parts.styles, {
205
- ctorType,
206
- autoScope,
207
- moduleId
208
- }, callback)
209
- },
210
- (callback) => {
211
- processJSON(parts.json, {
212
- loaderContext,
213
- pagesMap,
214
- componentsMap
215
- }, callback)
216
- }
217
- ], (err, res) => {
218
- callback(err, res)
219
- })
220
- },
221
- ([templateRes, stylesRes, jsonRes], callback) => {
222
- output += templateRes.output
223
- output += stylesRes.output
224
- output += jsonRes.output
225
- processScript(parts.script, {
226
- loaderContext,
227
- ctorType,
228
- srcMode,
229
- moduleId,
230
- isProduction,
231
- componentGenerics,
232
- jsonConfig: jsonRes.jsonObj,
233
- outputPath: queryObj.outputPath || '',
234
- builtInComponentsMap: templateRes.builtInComponentsMap,
235
- genericsInfo: templateRes.genericsInfo,
236
- wxsModuleMap: templateRes.wxsModuleMap,
237
- localComponentsMap: jsonRes.localComponentsMap
238
- }, callback)
239
- }
240
- ], (err, scriptRes) => {
241
- if (err) return callback(err)
242
- output += scriptRes.output
243
- this._module.addPresentationalDependency(new RecordVueContentDependency(filePath, output))
244
- callback(null, output)
147
+ return processWeb({
148
+ parts,
149
+ loaderContext,
150
+ pagesMap,
151
+ componentsMap,
152
+ queryObj,
153
+ ctorType,
154
+ srcMode,
155
+ moduleId,
156
+ isProduction,
157
+ hasScoped,
158
+ hasComment,
159
+ isNative,
160
+ usingComponents,
161
+ componentGenerics,
162
+ autoScope,
163
+ callback
245
164
  })
246
165
  }
166
+ // 处理mode为react时输出js格式文件
167
+ if (isReact(mode)) {
168
+ return processReact({
169
+ parts,
170
+ loaderContext,
171
+ pagesMap,
172
+ componentsMap,
173
+ queryObj,
174
+ ctorType,
175
+ srcMode,
176
+ moduleId,
177
+ isProduction,
178
+ hasScoped,
179
+ hasComment,
180
+ isNative,
181
+ usingComponents,
182
+ componentGenerics,
183
+ autoScope,
184
+ callback
185
+ })
186
+ }
187
+
247
188
  const moduleGraph = this._compilation.moduleGraph
248
189
 
249
190
  const issuer = moduleGraph.getIssuer(this._module)
@@ -252,6 +193,7 @@ module.exports = function (content) {
252
193
  return callback(new Error(`Current ${ctorType} [${this.resourcePath}] is issued by [${issuer.resource}], which is not allowed!`))
253
194
  }
254
195
 
196
+ let output = ''
255
197
  // 注入模块id及资源路径
256
198
  output += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
257
199
  if (!isProduction) {
@@ -278,17 +220,12 @@ module.exports = function (content) {
278
220
  }
279
221
 
280
222
  // 注入构造函数
281
- let ctor = 'App'
282
- if (ctorType === 'page') {
283
- // swan也默认使用Page构造器
284
- if (mpx.forceUsePageCtor || mode === 'ali') {
285
- ctor = 'Page'
286
- } else {
287
- ctor = 'Component'
288
- }
289
- } else if (ctorType === 'component') {
290
- ctor = 'Component'
291
- }
223
+ const ctor = ctorType === 'page'
224
+ ? (mpx.forceUsePageCtor || mode === 'ali') ? 'Page' : 'Component'
225
+ : ctorType === 'component'
226
+ ? 'Component'
227
+ : 'App'
228
+
292
229
  output += `global.currentCtor = ${ctor}\n`
293
230
  output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
294
231
  return match.toLowerCase()
@@ -307,6 +244,7 @@ module.exports = function (content) {
307
244
  hasScoped,
308
245
  hasComment,
309
246
  isNative,
247
+ ctorType,
310
248
  moduleId,
311
249
  usingComponents,
312
250
  componentPlaceholder