我们说,我有一个React
项目,主要入口点是app.js
。我在这里添加了React
,React-DOM
和jQuery
:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
...
现在假设我在这里定义了一些路由,这将导致它按需触发route1.js
,route2.js
等,如下所示:
SystemJS.import('route1.js');
现在,我使用jspm
将我的代码捆绑在一起(除了react
和react-dom
之外,我的app.js
还会导入许多自定义书写捆绑包。因此,当我将app.js
捆绑在一起捆绑所有库和自定义模块时,请说build.js
。
jspm bundle app.js build.js
现在,build.js
内的代码会根据需要触发加载route1.js
,route2.js
等。但是,route1.js
和route2.js
也会使用react
和react-dom
的ES6导入。现在我可以使用webpack
或jspm
来捆绑这些route1.js
,route2.js
等等。看,我已经包含了react
和{ {1}}中的{1}}个库,仅提取新的react-dom
,build.js
。我不想在route1.js
或route2.js
中包含相同的库,因为我已经在route1.js
内部下载了一次。但是只提取route2.js
或app.js
(使用ES6导入语句)不会起作用,因为浏览器不理解这一点。
如何制作