@tarojs/plugin-framework-react 4.0.1 → 4.0.3-alpha.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.
- package/LICENSE +8 -8
- package/dist/api-loader.js.map +1 -1
- package/dist/index.js +453 -68
- package/dist/index.js.map +1 -1
- package/dist/runtime.js +36 -32
- package/dist/runtime.js.map +1 -1
- package/package.json +45 -30
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var helper = require('@tarojs/helper');
|
|
6
6
|
var shared = require('@tarojs/shared');
|
|
7
|
+
var tslib = require('tslib');
|
|
7
8
|
var lodash = require('lodash');
|
|
8
9
|
var acorn = require('acorn');
|
|
9
10
|
var walk = require('acorn-walk');
|
|
@@ -29,6 +30,86 @@ function _interopNamespaceDefault(e) {
|
|
|
29
30
|
var acorn__namespace = /*#__PURE__*/_interopNamespaceDefault(acorn);
|
|
30
31
|
var walk__namespace = /*#__PURE__*/_interopNamespaceDefault(walk);
|
|
31
32
|
|
|
33
|
+
function apiLoader (str) {
|
|
34
|
+
return `import {
|
|
35
|
+
useAddToFavorites,
|
|
36
|
+
useDidHide,
|
|
37
|
+
useDidShow,
|
|
38
|
+
useError,
|
|
39
|
+
useLaunch,
|
|
40
|
+
useLoad,
|
|
41
|
+
useOptionMenuClick,
|
|
42
|
+
usePageNotFound,
|
|
43
|
+
usePageScroll,
|
|
44
|
+
usePullDownRefresh,
|
|
45
|
+
usePullIntercept,
|
|
46
|
+
useReachBottom,
|
|
47
|
+
useReady,
|
|
48
|
+
useResize,
|
|
49
|
+
useRouter,
|
|
50
|
+
useSaveExitState,
|
|
51
|
+
useShareAppMessage,
|
|
52
|
+
useShareTimeline,
|
|
53
|
+
useTabItemTap,
|
|
54
|
+
useTitleClick,
|
|
55
|
+
useScope,
|
|
56
|
+
useUnhandledRejection,
|
|
57
|
+
useUnload
|
|
58
|
+
} from '@tarojs/plugin-framework-react/dist/runtime'
|
|
59
|
+
${str}
|
|
60
|
+
|
|
61
|
+
taro.useAddToFavorites = useAddToFavorites
|
|
62
|
+
taro.useDidHide = useDidHide
|
|
63
|
+
taro.useDidShow = useDidShow
|
|
64
|
+
taro.useError = useError
|
|
65
|
+
taro.useLaunch = useLaunch
|
|
66
|
+
taro.useLoad = useLoad
|
|
67
|
+
taro.useOptionMenuClick = useOptionMenuClick
|
|
68
|
+
taro.usePageNotFound = usePageNotFound
|
|
69
|
+
taro.usePageScroll = usePageScroll
|
|
70
|
+
taro.usePullDownRefresh = usePullDownRefresh
|
|
71
|
+
taro.usePullIntercept = usePullIntercept
|
|
72
|
+
taro.useReachBottom = useReachBottom
|
|
73
|
+
taro.useReady = useReady
|
|
74
|
+
taro.useResize = useResize
|
|
75
|
+
taro.useRouter = useRouter
|
|
76
|
+
taro.useSaveExitState = useSaveExitState
|
|
77
|
+
taro.useShareAppMessage = useShareAppMessage
|
|
78
|
+
taro.useShareTimeline = useShareTimeline
|
|
79
|
+
taro.useTabItemTap = useTabItemTap
|
|
80
|
+
taro.useTitleClick = useTitleClick
|
|
81
|
+
taro.useScope = useScope
|
|
82
|
+
taro.useUnhandledRejection = useUnhandledRejection
|
|
83
|
+
taro.useUnload = useUnload
|
|
84
|
+
|
|
85
|
+
export {
|
|
86
|
+
useAddToFavorites,
|
|
87
|
+
useDidHide,
|
|
88
|
+
useDidShow,
|
|
89
|
+
useError,
|
|
90
|
+
useLaunch,
|
|
91
|
+
useLoad,
|
|
92
|
+
useOptionMenuClick,
|
|
93
|
+
usePageNotFound,
|
|
94
|
+
usePageScroll,
|
|
95
|
+
usePullDownRefresh,
|
|
96
|
+
usePullIntercept,
|
|
97
|
+
useReachBottom,
|
|
98
|
+
useReady,
|
|
99
|
+
useResize,
|
|
100
|
+
useRouter,
|
|
101
|
+
useSaveExitState,
|
|
102
|
+
useShareAppMessage,
|
|
103
|
+
useShareTimeline,
|
|
104
|
+
useTabItemTap,
|
|
105
|
+
useTitleClick,
|
|
106
|
+
useScope,
|
|
107
|
+
useUnhandledRejection,
|
|
108
|
+
useUnload
|
|
109
|
+
}
|
|
110
|
+
`;
|
|
111
|
+
}
|
|
112
|
+
|
|
32
113
|
function addConfig(source) {
|
|
33
114
|
const configsMap = {
|
|
34
115
|
enableShareAppMessage: ['onShareAppMessage', 'useShareAppMessage'],
|
|
@@ -80,20 +161,6 @@ function addConfig(source) {
|
|
|
80
161
|
});
|
|
81
162
|
return additionConfig;
|
|
82
163
|
}
|
|
83
|
-
const nervMeta = {
|
|
84
|
-
importFrameworkStatement: `
|
|
85
|
-
import Nerv from 'nervjs';
|
|
86
|
-
`,
|
|
87
|
-
mockAppStatement: `
|
|
88
|
-
class App extends Nerv.Component {
|
|
89
|
-
render () {
|
|
90
|
-
return this.props.children
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
`,
|
|
94
|
-
frameworkArgs: 'Nerv, Nerv, config',
|
|
95
|
-
importFrameworkName: 'Nerv'
|
|
96
|
-
};
|
|
97
164
|
function getLoaderMeta(framework) {
|
|
98
165
|
const loaderMeta = {
|
|
99
166
|
importFrameworkStatement: `
|
|
@@ -117,9 +184,6 @@ class App extends React.Component {
|
|
|
117
184
|
Object.assign(config, addConfig(source));
|
|
118
185
|
}
|
|
119
186
|
};
|
|
120
|
-
if (framework === 'nerv') {
|
|
121
|
-
Object.assign(loaderMeta, nervMeta);
|
|
122
|
-
}
|
|
123
187
|
if (process.env.TARO_PLATFORM === 'web') {
|
|
124
188
|
if (framework === 'react') {
|
|
125
189
|
const react = require('react');
|
|
@@ -135,9 +199,222 @@ class App extends React.Component {
|
|
|
135
199
|
return loaderMeta;
|
|
136
200
|
}
|
|
137
201
|
|
|
202
|
+
function h5iVitePlugin(ctx, framework) {
|
|
203
|
+
return [
|
|
204
|
+
injectLoaderMeta$2(ctx, framework),
|
|
205
|
+
setTaroApi(),
|
|
206
|
+
esbuildExclude(framework)
|
|
207
|
+
];
|
|
208
|
+
}
|
|
209
|
+
function injectLoaderMeta$2(ctx, framework) {
|
|
210
|
+
function customizer(object = '', sources = '') {
|
|
211
|
+
if ([object, sources].every(e => typeof e === 'string'))
|
|
212
|
+
return object + sources;
|
|
213
|
+
}
|
|
214
|
+
const { runnerUtils } = ctx;
|
|
215
|
+
const { getViteH5CompilerContext } = runnerUtils;
|
|
216
|
+
return {
|
|
217
|
+
name: 'taro-react:loader-meta',
|
|
218
|
+
buildStart() {
|
|
219
|
+
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
220
|
+
const viteCompilerContext = yield getViteH5CompilerContext(this);
|
|
221
|
+
if (viteCompilerContext) {
|
|
222
|
+
viteCompilerContext.loaderMeta = lodash.mergeWith(getLoaderMeta(framework), viteCompilerContext.loaderMeta, customizer);
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
}
|
|
228
|
+
function setTaroApi() {
|
|
229
|
+
// dev 环境通过 esbuild 来做; pro 环境通过 rollup load 钩子来做;因为生产环境不会走 esbuild
|
|
230
|
+
return {
|
|
231
|
+
name: 'taro-react:process-import-taro',
|
|
232
|
+
enforce: 'pre',
|
|
233
|
+
config: () => ({
|
|
234
|
+
optimizeDeps: {
|
|
235
|
+
esbuildOptions: {
|
|
236
|
+
plugins: [
|
|
237
|
+
{
|
|
238
|
+
name: 'taro:react-api',
|
|
239
|
+
setup(build) {
|
|
240
|
+
build.onLoad({ filter: helper.REG_TARO_H5_RUNTIME_API }, (args) => tslib.__awaiter(this, void 0, void 0, function* () {
|
|
241
|
+
const input = yield helper.fs.readFile(args.path, 'utf8');
|
|
242
|
+
return {
|
|
243
|
+
contents: apiLoader(input + '\n' + 'const taro = Taro__default\n')
|
|
244
|
+
};
|
|
245
|
+
}));
|
|
246
|
+
},
|
|
247
|
+
}
|
|
248
|
+
]
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
}),
|
|
252
|
+
load(id) {
|
|
253
|
+
return tslib.__awaiter(this, void 0, void 0, function* () {
|
|
254
|
+
if (process.env.NODE_ENV === 'production' && helper.REG_TARO_H5_RUNTIME_API.test(id)) {
|
|
255
|
+
try {
|
|
256
|
+
const input = yield helper.fs.readFile(id, 'utf8');
|
|
257
|
+
return apiLoader(input + '\n' + 'const taro = Taro__default\n');
|
|
258
|
+
}
|
|
259
|
+
catch (_) {
|
|
260
|
+
return null;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
}
|
|
267
|
+
// todo 后面看看能否把 preact 改为虚拟模块
|
|
268
|
+
function esbuildExclude(framework) {
|
|
269
|
+
if (framework !== 'preact')
|
|
270
|
+
return null;
|
|
271
|
+
return {
|
|
272
|
+
name: 'taro-react:esvuild-exclude',
|
|
273
|
+
enforce: 'pre',
|
|
274
|
+
config: () => ({
|
|
275
|
+
optimizeDeps: {
|
|
276
|
+
exclude: ['react', 'preact']
|
|
277
|
+
}
|
|
278
|
+
})
|
|
279
|
+
};
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
function harmonyVitePlugin(ctx, framework) {
|
|
283
|
+
return [
|
|
284
|
+
injectLoaderMeta$1(ctx, framework),
|
|
285
|
+
aliasPlugin$1(ctx, framework),
|
|
286
|
+
];
|
|
287
|
+
}
|
|
288
|
+
function injectLoaderMeta$1(ctx, framework) {
|
|
289
|
+
return {
|
|
290
|
+
name: 'taro-react:loader-meta',
|
|
291
|
+
buildStart() {
|
|
292
|
+
const { runnerUtils } = ctx;
|
|
293
|
+
const { getViteHarmonyCompilerContext } = runnerUtils;
|
|
294
|
+
const viteCompilerContext = getViteHarmonyCompilerContext(this);
|
|
295
|
+
if (viteCompilerContext) {
|
|
296
|
+
viteCompilerContext.loaderMeta || (viteCompilerContext.loaderMeta = {});
|
|
297
|
+
Object.assign(viteCompilerContext.loaderMeta, getLoaderMeta(framework));
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
}
|
|
302
|
+
function aliasPlugin$1(ctx, framework) {
|
|
303
|
+
if (framework === 'react') {
|
|
304
|
+
return {
|
|
305
|
+
name: 'taro-react:alias',
|
|
306
|
+
config(config) {
|
|
307
|
+
var _a;
|
|
308
|
+
const alias = [
|
|
309
|
+
{ find: /react-dom$/, replacement: '@tarojs/react' },
|
|
310
|
+
{ find: /react-dom\/client$/, replacement: '@tarojs/react' },
|
|
311
|
+
];
|
|
312
|
+
const mainFields = ['unpkg', ...helper.defaultMainFields];
|
|
313
|
+
const resolveOptions = {
|
|
314
|
+
basedir: process.cwd(),
|
|
315
|
+
mainFields,
|
|
316
|
+
};
|
|
317
|
+
const isProd = config.mode === 'production';
|
|
318
|
+
// TODO:harmony 目前会导致部分包用 production 版本,部分用 development 版本,导致许多 api 报错
|
|
319
|
+
const isHarmony = ctx.runOpts.options.platform === 'harmony';
|
|
320
|
+
if (!isProd && ((_a = ctx.initialConfig.harmony) === null || _a === void 0 ? void 0 : _a.debugReact) !== true && !isHarmony) {
|
|
321
|
+
// 在React18中,使用了exports字段约定了模块暴露路径,其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
|
|
322
|
+
// Why writeJson? prebundle will load package.json via readFile to check exports property.
|
|
323
|
+
const reactPkgPath = helper.resolveSync('react/package.json', resolveOptions);
|
|
324
|
+
if (reactPkgPath) {
|
|
325
|
+
const reactPkg = require('react/package.json');
|
|
326
|
+
const reactVersion = (reactPkg.version || '');
|
|
327
|
+
if ((/^[~^]?18/).test(reactVersion) && reactPkg.exports) {
|
|
328
|
+
reactPkg.exports = Object.assign(reactPkg.exports, {
|
|
329
|
+
'./cjs/': './cjs/'
|
|
330
|
+
});
|
|
331
|
+
helper.fs.writeJsonSync(reactPkgPath, reactPkg, { spaces: 2 });
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
return {
|
|
336
|
+
resolve: {
|
|
337
|
+
alias
|
|
338
|
+
}
|
|
339
|
+
};
|
|
340
|
+
}
|
|
341
|
+
};
|
|
342
|
+
}
|
|
343
|
+
return [];
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
function miniVitePlugin(ctx, framework) {
|
|
347
|
+
return [
|
|
348
|
+
injectLoaderMeta(ctx, framework),
|
|
349
|
+
aliasPlugin(ctx, framework),
|
|
350
|
+
];
|
|
351
|
+
}
|
|
352
|
+
function injectLoaderMeta(ctx, framework) {
|
|
353
|
+
return {
|
|
354
|
+
name: 'taro-react:loader-meta',
|
|
355
|
+
buildStart() {
|
|
356
|
+
const { runnerUtils } = ctx;
|
|
357
|
+
const { getViteMiniCompilerContext } = runnerUtils;
|
|
358
|
+
const viteCompilerContext = getViteMiniCompilerContext(this);
|
|
359
|
+
if (viteCompilerContext) {
|
|
360
|
+
viteCompilerContext.loaderMeta || (viteCompilerContext.loaderMeta = {});
|
|
361
|
+
Object.assign(viteCompilerContext.loaderMeta, getLoaderMeta(framework));
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
};
|
|
365
|
+
}
|
|
366
|
+
function aliasPlugin(ctx, framework) {
|
|
367
|
+
if (framework === 'react') {
|
|
368
|
+
return {
|
|
369
|
+
name: 'taro-react:alias',
|
|
370
|
+
config(config) {
|
|
371
|
+
var _a;
|
|
372
|
+
const alias = [
|
|
373
|
+
{ find: /react-dom$/, replacement: '@tarojs/react' },
|
|
374
|
+
{ find: /react-dom\/client$/, replacement: '@tarojs/react' },
|
|
375
|
+
];
|
|
376
|
+
const mainFields = ['unpkg', ...helper.defaultMainFields];
|
|
377
|
+
const resolveOptions = {
|
|
378
|
+
basedir: process.cwd(),
|
|
379
|
+
mainFields,
|
|
380
|
+
};
|
|
381
|
+
const isProd = config.mode === 'production';
|
|
382
|
+
// TODO:harmony 目前会导致部分包用 production 版本,部分用 development 版本,导致许多 api 报错
|
|
383
|
+
const isHarmony = ctx.runOpts.options.platform === 'harmony';
|
|
384
|
+
if (!isProd && ((_a = ctx.initialConfig.mini) === null || _a === void 0 ? void 0 : _a.debugReact) !== true && !isHarmony) {
|
|
385
|
+
// 不是生产环境,且没有设置 debugReact,则使用压缩版本的 react 依赖,减少体积
|
|
386
|
+
alias.push({ find: /react-reconciler$/, replacement: 'react-reconciler/cjs/react-reconciler.production.min.js' });
|
|
387
|
+
alias.push({ find: /^(?!.*mobx-react$).*react$/, replacement: 'react/cjs/react.production.min.js' });
|
|
388
|
+
alias.push({ find: /scheduler$/, replacement: 'scheduler/cjs/scheduler.production.min.js' });
|
|
389
|
+
alias.push({ find: /react\/jsx-runtime$/, replacement: 'react/cjs/react-jsx-runtime.production.min.js' });
|
|
390
|
+
// 在React18中,使用了exports字段约定了模块暴露路径,其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
|
|
391
|
+
// Why writeJson? prebundle will load package.json via readFile to check exports property.
|
|
392
|
+
const reactPkgPath = helper.resolveSync('react/package.json', resolveOptions);
|
|
393
|
+
if (reactPkgPath) {
|
|
394
|
+
const reactPkg = require('react/package.json');
|
|
395
|
+
const reactVersion = (reactPkg.version || '');
|
|
396
|
+
if ((/^[~^]?18/).test(reactVersion) && reactPkg.exports) {
|
|
397
|
+
reactPkg.exports = Object.assign(reactPkg.exports, {
|
|
398
|
+
'./cjs/': './cjs/'
|
|
399
|
+
});
|
|
400
|
+
helper.fs.writeJsonSync(reactPkgPath, reactPkg, { spaces: 2 });
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
return {
|
|
405
|
+
resolve: {
|
|
406
|
+
alias
|
|
407
|
+
}
|
|
408
|
+
};
|
|
409
|
+
}
|
|
410
|
+
};
|
|
411
|
+
}
|
|
412
|
+
return [];
|
|
413
|
+
}
|
|
414
|
+
|
|
138
415
|
function modifyH5WebpackChain(ctx, framework, chain) {
|
|
139
416
|
var _a;
|
|
140
|
-
setLoader$
|
|
417
|
+
setLoader$2(framework, chain);
|
|
141
418
|
setPlugin(ctx, framework, chain);
|
|
142
419
|
const { isBuildNativeComp = false } = ((_a = ctx.runOpts) === null || _a === void 0 ? void 0 : _a.options) || {};
|
|
143
420
|
const externals = {};
|
|
@@ -167,20 +444,19 @@ function modifyH5WebpackChain(ctx, framework, chain) {
|
|
|
167
444
|
module: {
|
|
168
445
|
rule: {
|
|
169
446
|
'process-import-taro-h5': {
|
|
170
|
-
test:
|
|
171
|
-
loader: require.resolve('./api-loader')
|
|
172
|
-
}
|
|
173
|
-
}
|
|
447
|
+
test: helper.REG_TARO_H5,
|
|
448
|
+
loader: require.resolve('./api-loader'),
|
|
449
|
+
},
|
|
450
|
+
},
|
|
174
451
|
},
|
|
175
452
|
});
|
|
176
453
|
}
|
|
177
|
-
function setLoader$
|
|
454
|
+
function setLoader$2(framework, chain) {
|
|
178
455
|
function customizer(object = '', sources = '') {
|
|
179
|
-
if ([object, sources].every(e => typeof e === 'string'))
|
|
456
|
+
if ([object, sources].every((e) => typeof e === 'string'))
|
|
180
457
|
return object + sources;
|
|
181
458
|
}
|
|
182
|
-
chain.plugin('mainPlugin')
|
|
183
|
-
.tap(args => {
|
|
459
|
+
chain.plugin('mainPlugin').tap((args) => {
|
|
184
460
|
args[0].loaderMeta = lodash.mergeWith(getLoaderMeta(framework), args[0].loaderMeta, customizer);
|
|
185
461
|
return args;
|
|
186
462
|
});
|
|
@@ -193,19 +469,75 @@ function setPlugin(ctx, framework, chain) {
|
|
|
193
469
|
if (!isProd && ((_b = (_a = config.h5) === null || _a === void 0 ? void 0 : _a.devServer) === null || _b === void 0 ? void 0 : _b.hot) !== false) {
|
|
194
470
|
// 默认开启 fast-refresh
|
|
195
471
|
if (framework === 'react') {
|
|
196
|
-
chain
|
|
197
|
-
.plugin('fastRefreshPlugin')
|
|
198
|
-
.use(require('@pmmmwh/react-refresh-webpack-plugin'));
|
|
472
|
+
chain.plugin('fastRefreshPlugin').use(require('@pmmmwh/react-refresh-webpack-plugin'));
|
|
199
473
|
}
|
|
200
474
|
else if (framework === 'preact') {
|
|
201
|
-
chain
|
|
202
|
-
|
|
203
|
-
.use(require('webpack').HotModuleReplacementPlugin);
|
|
204
|
-
chain
|
|
205
|
-
.plugin('fastRefreshPlugin')
|
|
206
|
-
.use(require('@prefresh/webpack'));
|
|
475
|
+
chain.plugin('hotModuleReplacementPlugin').use(require('webpack').HotModuleReplacementPlugin);
|
|
476
|
+
chain.plugin('fastRefreshPlugin').use(require('@prefresh/webpack'));
|
|
207
477
|
}
|
|
208
478
|
}
|
|
479
|
+
const mainFields = ['unpkg', ...helper.defaultMainFields];
|
|
480
|
+
const resolveOptions = {
|
|
481
|
+
basedir: process.cwd(),
|
|
482
|
+
mainFields,
|
|
483
|
+
};
|
|
484
|
+
if (framework === 'react') {
|
|
485
|
+
const alias = chain.resolve.alias;
|
|
486
|
+
// Note: 本地 link 调试时,避免 react 重复打包
|
|
487
|
+
alias.set('react$', helper.resolveSync('react', resolveOptions));
|
|
488
|
+
alias.set('react-dom$', helper.resolveSync('react-dom', resolveOptions));
|
|
489
|
+
}
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
function modifyHarmonyWebpackChain(ctx, framework, chain) {
|
|
493
|
+
setAlias$2(ctx, framework, chain);
|
|
494
|
+
setLoader$1(framework, chain);
|
|
495
|
+
}
|
|
496
|
+
function setAlias$2(ctx, framework, chain) {
|
|
497
|
+
var _a;
|
|
498
|
+
const config = ctx.initialConfig;
|
|
499
|
+
const alias = chain.resolve.alias;
|
|
500
|
+
const mainFields = ['unpkg', ...helper.defaultMainFields];
|
|
501
|
+
const resolveOptions = {
|
|
502
|
+
basedir: process.cwd(),
|
|
503
|
+
mainFields,
|
|
504
|
+
};
|
|
505
|
+
if (framework === 'react') {
|
|
506
|
+
alias.set('react-dom$', '@tarojs/react');
|
|
507
|
+
alias.set('react-dom/client$', '@tarojs/react');
|
|
508
|
+
const webpackConfig = chain.toConfig();
|
|
509
|
+
const isProd = webpackConfig.mode === 'production';
|
|
510
|
+
if (!isProd && ((_a = config.harmony) === null || _a === void 0 ? void 0 : _a.debugReact) !== true) {
|
|
511
|
+
// 不是生产环境,且没有设置 debugReact,则使用压缩版本的 react 依赖,减少体积
|
|
512
|
+
// 兼容pnpm workspace
|
|
513
|
+
const reactModulePath = helper.resolveSync('react', resolveOptions);
|
|
514
|
+
const newFilePath = path.join(path.dirname(reactModulePath), 'cjs', 'react.production.min.js');
|
|
515
|
+
alias.set('react-reconciler$', 'react-reconciler/cjs/react-reconciler.production.min.js');
|
|
516
|
+
alias.set('react$', newFilePath);
|
|
517
|
+
alias.set('react/jsx-runtime$', 'react/cjs/react-jsx-runtime.production.min.js');
|
|
518
|
+
// 在React18中,使用了exports字段约定了模块暴露路径,其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
|
|
519
|
+
// Why writeJson? prebundle will load package.json via readFile to check exports property.
|
|
520
|
+
const reactPkgPath = helper.resolveSync('react/package.json', resolveOptions);
|
|
521
|
+
if (reactPkgPath) {
|
|
522
|
+
const reactPkg = require('react/package.json');
|
|
523
|
+
const reactVersion = reactPkg.version || '';
|
|
524
|
+
if (/^[~^]?18/.test(reactVersion) && reactPkg.exports) {
|
|
525
|
+
reactPkg.exports = Object.assign(reactPkg.exports, {
|
|
526
|
+
'./cjs/': './cjs/',
|
|
527
|
+
});
|
|
528
|
+
helper.fs.writeJsonSync(reactPkgPath, reactPkg, { spaces: 2 });
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
function setLoader$1(framework, chain) {
|
|
535
|
+
chain.plugin('mainPlugin').tap((args) => {
|
|
536
|
+
var _a;
|
|
537
|
+
(_a = args[0]).loaderMeta || (_a.loaderMeta = {});
|
|
538
|
+
Object.assign(args[0].loaderMeta, getLoaderMeta(framework));
|
|
539
|
+
return args;
|
|
540
|
+
});
|
|
209
541
|
}
|
|
210
542
|
|
|
211
543
|
function modifyMiniWebpackChain(ctx, framework, chain) {
|
|
@@ -216,6 +548,11 @@ function setAlias$1(ctx, framework, chain) {
|
|
|
216
548
|
var _a;
|
|
217
549
|
const config = ctx.initialConfig;
|
|
218
550
|
const alias = chain.resolve.alias;
|
|
551
|
+
const mainFields = ['unpkg', ...helper.defaultMainFields];
|
|
552
|
+
const resolveOptions = {
|
|
553
|
+
basedir: process.cwd(),
|
|
554
|
+
mainFields,
|
|
555
|
+
};
|
|
219
556
|
if (framework === 'react') {
|
|
220
557
|
alias.set('react-dom$', '@tarojs/react');
|
|
221
558
|
alias.set('react-dom/client$', '@tarojs/react');
|
|
@@ -224,14 +561,14 @@ function setAlias$1(ctx, framework, chain) {
|
|
|
224
561
|
if (!isProd && ((_a = config.mini) === null || _a === void 0 ? void 0 : _a.debugReact) !== true) {
|
|
225
562
|
// 不是生产环境,且没有设置 debugReact,则使用压缩版本的 react 依赖,减少体积
|
|
226
563
|
// 兼容pnpm workspace
|
|
227
|
-
const reactModulePath =
|
|
564
|
+
const reactModulePath = helper.resolveSync('react', resolveOptions);
|
|
228
565
|
const newFilePath = path.join(path.dirname(reactModulePath), 'cjs', 'react.production.min.js');
|
|
229
566
|
alias.set('react-reconciler$', 'react-reconciler/cjs/react-reconciler.production.min.js');
|
|
230
|
-
alias.set(
|
|
567
|
+
alias.set(/^(?!.*mobx-react$).*react$/, newFilePath);
|
|
231
568
|
alias.set('react/jsx-runtime$', 'react/cjs/react-jsx-runtime.production.min.js');
|
|
232
569
|
// 在React18中,使用了exports字段约定了模块暴露路径,其中并未暴露 ./cjs/ 。这将使上面的alias在编译时报错。相当的tricky。
|
|
233
570
|
// Why writeJson? prebundle will load package.json via readFile to check exports property.
|
|
234
|
-
const reactPkgPath =
|
|
571
|
+
const reactPkgPath = helper.resolveSync('react/package.json', resolveOptions);
|
|
235
572
|
if (reactPkgPath) {
|
|
236
573
|
const reactPkg = require('react/package.json');
|
|
237
574
|
const reactVersion = reactPkg.version || '';
|
|
@@ -247,29 +584,31 @@ function setAlias$1(ctx, framework, chain) {
|
|
|
247
584
|
}
|
|
248
585
|
function setLoader(framework, chain) {
|
|
249
586
|
chain.plugin('miniPlugin').tap((args) => {
|
|
250
|
-
|
|
587
|
+
var _a;
|
|
588
|
+
(_a = args[0]).loaderMeta || (_a.loaderMeta = {});
|
|
589
|
+
Object.assign(args[0].loaderMeta, getLoaderMeta(framework));
|
|
251
590
|
return args;
|
|
252
591
|
});
|
|
253
592
|
}
|
|
254
593
|
|
|
594
|
+
function isReactLike(framework = 'react') {
|
|
595
|
+
return ['react', 'preact'].includes(framework);
|
|
596
|
+
}
|
|
255
597
|
var index = (ctx) => {
|
|
256
|
-
const { framework } = ctx.initialConfig;
|
|
257
|
-
if (framework
|
|
598
|
+
const { framework = 'react' } = ctx.initialConfig;
|
|
599
|
+
if (!isReactLike(framework))
|
|
258
600
|
return;
|
|
259
601
|
ctx.modifyWebpackChain(({ chain }) => {
|
|
260
602
|
// 通用
|
|
261
603
|
setAlias(framework, chain);
|
|
262
|
-
chain
|
|
263
|
-
.plugin('definePlugin')
|
|
264
|
-
.tap(args => {
|
|
265
|
-
const config = args[0];
|
|
266
|
-
config.__TARO_FRAMEWORK__ = `"${framework}"`;
|
|
267
|
-
return args;
|
|
268
|
-
});
|
|
269
604
|
if (process.env.TARO_PLATFORM === 'web') {
|
|
270
605
|
// H5
|
|
271
606
|
modifyH5WebpackChain(ctx, framework, chain);
|
|
272
607
|
}
|
|
608
|
+
else if (process.env.TARO_PLATFORM === 'harmony' || process.env.TARO_ENV === 'harmony') {
|
|
609
|
+
// 鸿蒙
|
|
610
|
+
modifyHarmonyWebpackChain(ctx, framework, chain);
|
|
611
|
+
}
|
|
273
612
|
else {
|
|
274
613
|
// 小程序
|
|
275
614
|
modifyMiniWebpackChain(ctx, framework, chain);
|
|
@@ -280,18 +619,13 @@ var index = (ctx) => {
|
|
|
280
619
|
return;
|
|
281
620
|
if (shared.isString(opts.compiler)) {
|
|
282
621
|
opts.compiler = {
|
|
283
|
-
type: opts.compiler
|
|
622
|
+
type: opts.compiler,
|
|
284
623
|
};
|
|
285
624
|
}
|
|
286
625
|
const { compiler } = opts;
|
|
287
626
|
if (compiler.type === 'webpack5') {
|
|
288
627
|
// 提供给 webpack5 依赖预编译收集器的第三方依赖
|
|
289
|
-
const deps = [
|
|
290
|
-
'react',
|
|
291
|
-
'react-dom',
|
|
292
|
-
'react/jsx-runtime',
|
|
293
|
-
'@tarojs/plugin-framework-react/dist/runtime'
|
|
294
|
-
];
|
|
628
|
+
const deps = ['react', 'react-dom', 'react/jsx-runtime', '@tarojs/plugin-framework-react/dist/runtime'];
|
|
295
629
|
compiler.prebundle || (compiler.prebundle = {});
|
|
296
630
|
const prebundleOptions = compiler.prebundle;
|
|
297
631
|
prebundleOptions.include || (prebundleOptions.include = []);
|
|
@@ -303,10 +637,10 @@ var index = (ctx) => {
|
|
|
303
637
|
const taroReactPlugin = {
|
|
304
638
|
name: 'taroReactPlugin',
|
|
305
639
|
setup(build) {
|
|
306
|
-
build.onLoad({ filter:
|
|
640
|
+
build.onLoad({ filter: helper.REG_TARO_H5 }, ({ path }) => {
|
|
307
641
|
const content = helper.fs.readFileSync(path).toString();
|
|
308
642
|
return {
|
|
309
|
-
contents: require('./api-loader')(content)
|
|
643
|
+
contents: require('./api-loader')(content),
|
|
310
644
|
};
|
|
311
645
|
});
|
|
312
646
|
}
|
|
@@ -316,23 +650,74 @@ var index = (ctx) => {
|
|
|
316
650
|
esbuildConfig.plugins || (esbuildConfig.plugins = []);
|
|
317
651
|
esbuildConfig.plugins.push(taroReactPlugin);
|
|
318
652
|
}
|
|
653
|
+
else if (compiler.type === 'vite') {
|
|
654
|
+
compiler.vitePlugins || (compiler.vitePlugins = []);
|
|
655
|
+
compiler.vitePlugins.push(viteCommonPlugin(framework));
|
|
656
|
+
compiler.vitePlugins.push(VitePresetPlugin(framework));
|
|
657
|
+
if (process.env.TARO_PLATFORM === 'web') {
|
|
658
|
+
// H5
|
|
659
|
+
compiler.vitePlugins.push(h5iVitePlugin(ctx, framework));
|
|
660
|
+
}
|
|
661
|
+
else if (process.env.TARO_PLATFORM === 'harmony' || process.env.TARO_ENV === 'harmony') {
|
|
662
|
+
// 鸿蒙
|
|
663
|
+
compiler.vitePlugins.push(harmonyVitePlugin(ctx, framework));
|
|
664
|
+
}
|
|
665
|
+
else {
|
|
666
|
+
// 小程序
|
|
667
|
+
compiler.vitePlugins.push(miniVitePlugin(ctx, framework));
|
|
668
|
+
}
|
|
669
|
+
}
|
|
319
670
|
});
|
|
320
671
|
};
|
|
321
672
|
function setAlias(framework, chain) {
|
|
322
673
|
const alias = chain.resolve.alias;
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
alias.set('react/jsx-runtime', 'preact/jsx-runtime');
|
|
329
|
-
break;
|
|
330
|
-
case 'nerv':
|
|
331
|
-
alias.set('react$', 'nervjs');
|
|
332
|
-
alias.set('react-dom$', 'nervjs');
|
|
333
|
-
break;
|
|
674
|
+
if (framework === 'preact') {
|
|
675
|
+
alias.set('react', 'preact/compat');
|
|
676
|
+
alias.set('react-dom/test-utils', 'preact/test-utils');
|
|
677
|
+
alias.set('react-dom', 'preact/compat');
|
|
678
|
+
alias.set('react/jsx-runtime', 'preact/jsx-runtime');
|
|
334
679
|
}
|
|
335
680
|
}
|
|
681
|
+
function VitePresetPlugin(framework) {
|
|
682
|
+
return framework === 'preact'
|
|
683
|
+
? require('@preact/preset-vite').preact({
|
|
684
|
+
babel: {
|
|
685
|
+
plugins: [
|
|
686
|
+
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
687
|
+
['@babel/plugin-proposal-class-properties', { loose: true }],
|
|
688
|
+
],
|
|
689
|
+
},
|
|
690
|
+
})
|
|
691
|
+
: require('@vitejs/plugin-react').default({
|
|
692
|
+
babel: {
|
|
693
|
+
plugins: [
|
|
694
|
+
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
695
|
+
['@babel/plugin-proposal-class-properties', { loose: true }],
|
|
696
|
+
],
|
|
697
|
+
},
|
|
698
|
+
});
|
|
699
|
+
}
|
|
700
|
+
function viteCommonPlugin(framework) {
|
|
701
|
+
return {
|
|
702
|
+
name: 'taro-react:common',
|
|
703
|
+
config() {
|
|
704
|
+
const alias = framework === 'preact'
|
|
705
|
+
? [
|
|
706
|
+
{ find: 'react', replacement: 'preact/compat' },
|
|
707
|
+
{ find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
|
|
708
|
+
{ find: 'react-dom', replacement: 'preact/compat' },
|
|
709
|
+
{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' },
|
|
710
|
+
]
|
|
711
|
+
: [];
|
|
712
|
+
return {
|
|
713
|
+
resolve: {
|
|
714
|
+
alias,
|
|
715
|
+
},
|
|
716
|
+
};
|
|
717
|
+
},
|
|
718
|
+
};
|
|
719
|
+
}
|
|
336
720
|
|
|
337
721
|
exports.default = index;
|
|
722
|
+
exports.isReactLike = isReactLike;
|
|
338
723
|
//# sourceMappingURL=index.js.map
|