Question

我正在尝试使用杏仁构建独立模块，这是我的设置。问题出在底部。

缩写目录结构是：

|-static
   |-core
      |-js
        |-require.js
        |-almond.js
        |-common.js
        |-app.build.js
        |-app
          |-myApp.js

   |-vendor
      |-js
        |-jquery.js
        |-bootstrap.js
        |-fancybox.js

common.js的缩写内容：

require.config({
    baseUrl: "/static/core/js",
    paths: {
        'jquery':'../../vendor/jquery/1.7.2/jquery',
        'bootstrap':'../../vendor/bootstrap/2.2.2/js/bootstrap',
        'fancybox':'../../vendor/fancybox/2.0.6/jquery.fancybox',
    },
    shim: {
        'bootstrap':['jquery'],
        'fancybox': ['jquery'],
        'app/messages': ["jquery"],
    },
    waitSeconds: 12
});

app / myApp.js的缩写内容（是的，我知道我在污染全球的NAMESPACE）：

define(function (require) {
    var $ = require('jquery');
    require('fancybox');
    require('app/messages');

    //all myApp's code here
    console.log('Is this thing on?')
});

我的构建文件：app.build.js：

mainConfigFile: 'common.js',
removeCombined: true,
skipDirOptimize: true,
wrapShim: false,
wrap: false,

modules: [
    {
        name: 'almond',
        include: ['app/myApp'],
        out: ['myApp.js'
    },

],

更新（添加了html）： 我的django模板HTML的底部：

{% require_module 'myApp' %}

模板标签转换为：

<script src="/static/core/js/myApp.js"></script>

当我执行构建时，我将获得包含杏仁，所有myApp的依赖项以及myApp的所有代码的完整构建。但是，依赖项会加载并执行其代码，但myApp的代码不会执行。

我希望在myApp的依赖项加载之后，我会看到＆＃34;这个东西开启了吗？＆＃34; （请参阅上面的app / myApp.js），但没有骰子......

注意：我实际上是使用django-require来构建独立模块，但我认为app.build.js与它正在做的非常接近，并且考虑到最终的myApp.js文件包含所有必需的部分它不应该有所作为。

Answer 1

尝试将您的define类更改为require类：

require( ["jquery", "fancybox", "app/messages"], function ($, fancybox, messages) {

    //all myApp's code here
    console.log('Is this thing on?')
});

使用require将包含require.config的文件放在头顶上方的任何其他文件中。然后确保包含新require函数的文件位于HTML中以供参考。

至少我过去如何使用过必需品。

requirejs，almond：使用杏仁构建的独立模块加载所有依赖项，但主代码未执行

1 个答案: