javascript - webpack能否解决加载时的依赖问题
PHPz
PHPz 2017-04-11 12:51:31
[JavaScript讨论组]

比如在某个多页面项目中,有个a.js依赖jQuery,因为jQuery在每个页面中都被使用了,所以不能将a.js与jQuery打包在一起。

当a.js与jQuery都通过async的方式加载时,并不能保证jQuery会在a.js之前加载完,该如何解决这个问题。

在require.js中据说是通过每个script的onload事件来判断的,不晓得webpack有没有这方面的解决方案。

PHPz
PHPz

学习是最好的投资!

全部回复(1)
巴扎黑

可以用 require.ensure, 或者在webpack中直接使用AMD风格的require.

webpack2已经支持了AMD风格加载异步模块,详情参见:https://webpack.github.io/doc...

---- 补充个荔枝: ---

实测可以这样写:

源代码:

// 
(function (){
    console.log("page loaded....")

    require(['jquery', 'lodash'], function($, _){
        console.log("jquery: ", $)
        console.log('lodash: ', _)
    })

})()

构建后:

 (function(module, __webpack_exports__, __webpack_require__) {

        "use strict";
        Object.defineProperty(__webpack_exports__, "__esModule", {
            value: true
        });
        /* harmony import */
        var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof__ = __webpack_require__(67);
        /* harmony import */
        var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof__);

        console.log("page loaded....");

        console.log("do something before load jquery...");

        __webpack_require__.e /* require */
        (17).then(function() {
            var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(479), __webpack_require__(331)];
            (function($, _) {
                console.log("jquery and loadash loaded: ");
                console.log("jquery: ", typeof $ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()($));
                console.log('lodash: ', typeof _ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()(_));
            }
            .apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));
        }).catch(__webpack_require__.oe);

        console.log("do something else, now jquery and lodash are not loaded.");
        console.log("jquery: ", typeof $ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()($));
        console.log('lodash: ', typeof _ === "undefined" ? "undefined" : __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_typeof___default()(_));

        /***/
    })

console输出:

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号