Question

我有一个app.js，这是我的webapplication的主要文件。它初始化UI并加载不同的模块。目前它是一个包含所有代码的大文件。我想重构这个并将函数拆分成独立的模块，然后用browserify捆绑它们。 App.js依赖于jquery和一些模块。

我在browser

中定义了package.json部分

"browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-ui": "./static/js/vendor/jquery-ui-1.12.1/jquery-ui.min.js",
    "App": "./static/js/app.js",
    "myModule": "./static/js/myModule.js"
}

我还使用browserify-shim加载一些无法加载的jquery插件。

对于browserify-shim，我已定义了配置部分：

"browserify": {
    "transform": [
      "browserify-shim"
    ]
},
"browserify-shim": {
    "jquery": "$",
    "jquery-ui": {
      "depends": [
        "jquery:$"
    ]
    },
    "bootstrap": {
        "depends": [
            "jquery:$"
        ]
    },
    "dropdown": {
       "depends": [
           "jquery:$"
       ]
    },
    "App": {
        "exports": "App",
        "depends": [
            "jquery:$"
        ]
    },
}

我的entry.js文件

var $ = require("jquery");
window.$ = window.jQuery = jQuery;
var App = require('./app.js');
require('./some jquery plugins');

在我的app.js

中

var App = function(){
    some code...

    var myModule = require('./myModule.js');
    myModule();

    some code...
    return {
        init: function() {
            someFunctions();
            someFunctions(); 
        }
    }
}();

$(function(){ App.init(); });

在我的myModule.js

中

module.exports = function() {
    some code with jquery...    
};

它正确捆绑但如果我加载页面我会得到

app.js:14Uncaught Error: Cannot find module './myModule.js'

如果我查看浏览器中的来源，它会告诉我：

var myModule = __browserify_shim_require__('./myModule.js');

因此浏览器似乎无法在此范围内正确加载模块。

我做错了什么？我忘了什么吗？我想我不需要填充自己的模块，因为我可以使用commonjs格式进行浏览。在这种情况下我是否必须使用其他模式？

提前感谢您的帮助！

修改

我还没有解决方案。我重构了整个事情，现在我不再需要浏览器垫片了。你可以在没有它的情况下添加大多数插件。

browserify模块加载到函数中

0 个答案: