webpack中external实践
# CDN资源
# 在Vue中的实践
# 在React中的实践
选择UMD方式的；比如：https://unpkg.com/browse/react-router-dom@4.3.1/umd/
要点： 处理这个一定要锁住版本号，确保版本加载的方式一样；
- 'umi-plugin-locale': 'window.UmiPluginLocale',
- 'umi-plugin-locale/lib/locale': 'window.UmiPluginLocale', // 兼容高版本umi国际化
const getArgvOptions = require('../argvOptions');
const { join } = require('path');
const argvOptions = getArgvOptions();
const base = argvOptions.base || '/';
const ROUTER_BASE = base.lastIndexOf('/') === base.length - 1 ? base : `${base}/`;
module.exports = (api, options = {}) => {
api.chainWebpackConfig(config => {
config.externals({
react: 'window.React',
'react-dom': 'window.ReactDOM',
'react-router': 'window.ReactRouter',
'react-router-dom': 'window.ReactRouterDOM',
dva: 'window.dva',
'umi-plugin-locale': 'window.UmiPluginLocale',
'umi-plugin-locale/lib/locale': 'window.UmiPluginLocale', // 兼容高版本umi国际化
'umi/locale': 'window.UmiLocale',
'umi-plugin-react/locale': 'window.UmiLocale',
moment: 'window.moment',
jquery: 'window.jQuery',
'@antv/data-set': 'window.DataSet',
antd: 'window.antd',
// '@ant-design/icons': 'window.cloud.ant-design-icons',
bizcharts: 'window.BizCharts',
// 'ace-builds': 'window.cloud.ace-builds',
'lottie-web': 'window.lottie',
// jsplumb: 'window.cloud.jsPlumb',
lodash: 'window._',
});
});
api.addHTMLHeadScript(() => {
const scripts = (options.scripts || []).map(sub => {
return { src: sub };
});
return [
{ src: `${ROUTER_BASE}js/react.production.min.js` },
{ src: `${ROUTER_BASE}js/react-dom.production.min.js` },
{ src: `${ROUTER_BASE}js/react-router.min.js` },
{ src: `${ROUTER_BASE}js/react-router-dom.min.js` },
{ src: `${ROUTER_BASE}js/dva.min.js` },
{ src: `${ROUTER_BASE}js/umi-plugin-locale.js` },
{ src: `${ROUTER_BASE}js/moment.min.js` },
{ src: `${ROUTER_BASE}js/antd.min.js` },
{ src: `${ROUTER_BASE}js/jquery.min.js` },
{ src: `${ROUTER_BASE}js/lodash.min.js` },
{ src: `${ROUTER_BASE}js/biz-charts.min.js` },
{ src: `${ROUTER_BASE}js/lottie.min.js` },
...scripts,
];
});
api.addHTMLLink(() => {
return (options.stylesheets || []).map(sub => {
return { href: sub, rel: 'stylesheet' };
});
});
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
# 注意事项
设置了react-router-dom一定要记得设置react-router，版本要保持一致；
要不然会报错：``Invariant Violation: You should not use <Switch> outside a <Router>
Try doing this rather
import { BrowserRouter, Switch, Route } from 'react-router-dom';
1
And then wrap everything like this
<BrowserRouter>
<Switch>
//your routes here
</Switch>
</BrowserRouter>
1
2
3
4
5
2
3
4
5
Make sure to have correct imports in all nested components. You might get that error if one of them imports Switch from react-router instead of react-router-dom. Keeping everything consistent with 'react-router-dom' (that reexports react-router components anyway). Checked with:
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
1
2
2
# 相关链接
https://stackoverflow.com/questions/50584641/invariant-violation-you-should-not-use-switch-outside-a-router
上次更新: 2022/04/15, 05:41:27