如何在 requirejs 中包含 3rd 方脚本 [英] How to include 3rd party scripts with requirejs

问题描述

我正在尝试 AMD 处理 scipts 的方式，而我的选择落在了 requirejs 上.在这个项目中，我使用了 MDL(前端框架；对于那些没有听说过它的人，可以将其视为 bootstrap 3)，它应该包含在:

I'm trying out AMD-way of handling scipts and my choise fell upon requirejs. In this project I use MDL (front-end framework; for those who haven't heard of it think of it as bootstrap 3) which should be included as:

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

我对这个框架提供的 js API 不感兴趣(如果它提供的话)，当我将特定于 framwerk 的类附加到元素时，我只需要这个脚本来让 UI 正常工作.

I am not interested in js API that this framework is providing (if it provides any), I need this script only for UI to work properly when I attach framwerk-specific classes to elements.

根据 requirejs 的理念，我只需要一个脚本文件就可以包含在我的页面上的 script 标记中 - 入口点.我知道在那个主脚本中我需要依赖依赖项.如果是 jQuery 或下划线，即我实际上 require 和我的代码所依赖的库，我会写如下内容:

According to requirejs philosophy I need only one script file to be included with a script tag on my page - the entry point. I understand that in that main script I need to require dependencies. And if it was say jQuery or underscore i.e. the library I actually require and my code depends on, I would write something like:

require(
    ['jquery'],
     function($) {
        $('body').append(...);
    }
);

但是，如果它不是实际依赖项，但我仍然需要将它加载到我的页面中，我该如何滚动，在这种特殊情况下，我需要先加载它.

But how do I roll if it's not an actual dependency but I still need it to be loaded in my page and, in this particular case, I need it to be loaded first.

我该怎么办?我的猜测是我从我的 head 中删除了 script 标记，并在我的入口点脚本中的方括号中指定它(就像我在上面的片段中为 jquery 所做的那样)，但只是不要'不要使用它.对吗?

What do I do? My guess is I remove the script tag from my head and specify it in square brackets in my entry point script (as I did for jquery in snippet above) but just don't use it. Is it correct?

推荐答案

但是，如果它不是实际的依赖项，但我仍然需要将它加载到我的页面中，我该如何滚动，在这种特殊情况下，我需要先加载它.

But how do I roll if it's not an actual dependency but I still need it to be loaded in my page and, in this particular case, I need it to be loaded first.

RequireJS 只保证模块加载的相对顺序.如果一个模块必须绝对首先加载，那么依赖链必须使得其他一切都直接或间接地依赖它.RequireJS 没有提供一种方法来说在其他一切之前加载它".您只能通过依赖项来获得这种效果.(有时人们认为 deps 配置选项保证某些模块将首先加载.它没有.或者他们认为 require 或 define 中的依赖关系的顺序 调用设置了加载的顺序 超出 依赖项设置.它没有.如果 A 和 B 没有它们的依赖项拥有 then require(['A', 'B'], ... 和 require['B', 'A'], ... 都是免费的按任意顺序加载模块.)

RequireJS only guarantees the relative order in which modules are loaded. If a module must absolutely be loaded first, then the chain of dependencies must be such that everything else depends on it, directly or indirectly. RequireJS does not provide a method to say "load this before everything else". You can get this effect only through dependencies. (Sometimes people think the deps configuration option guarantees that some modules will load first. It does not. Or they think that the order of dependencies in a require or define call sets an order for loading beyond what the dependencies set. It does not. If A and B have no dependencies of their own then require(['A', 'B'], ... and require['B', 'A'], ... are both free to load the modules in any order.)

我该怎么办?我的猜测是我从头上删除了脚本标签，并在我的入口点脚本中的方括号中指定它(就像我在上面的代码片段中为 jquery 所做的那样)，但只是不使用它.对吗?

What do I do? My guess is I remove the script tag from my head and specify it in square brackets in my entry point script (as I did for jquery in snippet above) but just don't use it. Is it correct?

理论上这样做没有问题.我说理论上"是因为我不使用 MDL，所以我不知道 MDL 是否有任何需要阻止它工作.您已经将 MDL 与 Bootstrap 3 进行了比较.您描述的是我如何使用 RequireJS 加载 Bootstrap.我倾向于使用 CommonJS 习惯用法，所以需要 Bootstrap 的模块看起来像这样:

In theory there's no problem with doing this. I say "in theory" because I do not use MDL so I don't know if MDL has any need that would prevent it from working. You've compared MDL with Bootstrap 3. What you describe is how I load Bootstrap with RequireJS. I tend to use the CommonJS idiom so modules that need Bootstrap look something like this:

define(function (require, exports, module) {
'use strict';

require("bootstrap");

没有必要做类似 var bootstrap = require("bootstrap"); 因为值将是 undefined 因为 Bootstrap 的 JS 代码将自身安装为jQuery 插件.

There's no need to do something like var bootstrap = require("bootstrap"); because the value would be undefined anyway because the JS code of Bootstrap installs itself as jQuery plugins.

这篇关于如何在 requirejs 中包含 3rd 方脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！