Dva: 咨询一个dva架构上的问题

[miaojiuchen]

详情见知乎提问： https://www.zhihu.com/question/55433042

[miaojiuchen]

我看了下这些从别的域名加载来的组件，比如https://g.alicdn.com/aliyun/console/1.4.43/scripts/components/topbar/topbar.bundle.js ，它是webpack打包的，代码就是一个webpackBootstrap的直接执行函数，里面包含了组件和它依赖的几个别的模块，模块id是从0开始的，如下图的结构

我只知道webpack自己有个require.ensure可以打包出类似下图结构的异步模块

按我的理解，这些模块应该是可以通过webpackJsonp这个函数来并入当前页面的模块数组里，那么请问dva项目里如何加载这些别的域名站点下打包的webpack模块呢？

[miaojiuchen]

想了解一下阿里云控制台这种 某个域名从别的域名（比如home.console.aliyun.com)加载组件的这种实现方式 @sorrycc

[miaojiuchen]

在同一个项目里构建的moduleId一定是唯一的，我的想法是webpack应该有某种方式可以处理如上面topbar.bundle.js这种第三方的模块，比如本项目有500个module，这个topbar里有20个module，其中topbar为编号18的module，这样的话当前项目加载这个topbar就可以给它分配一个501的id ，然后要渲染topbar的时候就可以直接 __webpack_require__(501)(18)来取得这个module

[miaojiuchen]

我想问的就是如何使用这样的第三方组件呢？（代码不在本项目中，不参与项目的webpack打包）

[miaojiuchen]

还有就是，如何确定一个公共组件的最小依赖集合呢？我尝试打包一个基础的组件，发现会多很多工具库比如 core-js、es module的shim和各种样式预处理器的loader之类乱七八糟的东西

[miaojiuchen]

自己解决了。。。原来实现的这么low啊，require来这个xxx.bundle.js后，里面导出的关键模块最后有一句代码：

我以为有什么黑科技呢。。。

[miaojiuchen]

整理一下：

用webpack打包一个单独的组件后产出的是这个立即执行module，里面包含了这个组件的最小依赖集合

在这个立即执行函数执行的时候，会去执行这个代码

然后这个代码会去执行id为19的module的代码，这个代码就是这个组件的主逻辑，阿里云的做法是

所以引用别人的库的话只要异步加载这个bundle，然后window.XXX就能拿到这个组件了，并没有什么黑科技

[miaojiuchen]

补充一个webpack构建的项目中加载cdn中的js的方式 https://github.com/webpack/webpack/issues/150

webpack is a module bundler not a javascript loader. It package files from local disk and don't load files from the web (except its own chunks).Use a javascript loader, i. e. script.js

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() {
    // ...
});