javascript RequireJS:多个 main.js?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8081605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
RequireJS: Multiple main.js?
提问by wilsonpage
I have been building a single page app using requireJS and so far loving it. I have come to the point of developing other parts of the site outside of the main app and am not really sure how (or if) to use requireJS for this.
我一直在使用 requireJS 构建一个单页应用程序,到目前为止我很喜欢它。我已经到了在主应用程序之外开发网站其他部分的地步,但我不确定如何(或是否)为此使用 requireJS。
In my main app everything is triggered by this script tag:
在我的主应用程序中,一切都由这个脚本标签触发:
<script data-main='/scripts/main' src='/scripts/libs/require.js'>
I am now developing the home page which has it's own front end scripts. Using the optimizer when it comes to getting the site live which will bundle all these scripts into one main.js
package. I am struggling to understand where the rest of my site fits into this.
我现在正在开发具有自己前端脚本的主页。在让网站上线时使用优化器,它将所有这些脚本捆绑到一个main.js
包中。我正在努力了解我网站的其余部分适合于此。
Say my app is dependent on jQuery and it gets bundled up in the optimized version of the app, what if I want to use jQuery on the homepage? I don't want to load in my app's main.js
just to get access to my jQuery module. So yeah... a little confused!
假设我的应用程序依赖于 jQuery 并且它被捆绑在应用程序的优化版本中,如果我想在主页上使用 jQuery 怎么办?我不想加载我的应用程序main.js
只是为了访问我的 jQuery 模块。所以是的……有点困惑!
I am imagining a site structure sort of like this:
我想象的网站结构有点像这样:
/scripts
- app-main.js //(includes all module dependencies after optimzation)
- home-main.js //(includes all module dependencies after optimzation)
App:
应用程序:
<script data-main='/scripts/app-main' src='/scripts/libs/require.js'>
Homepage:
主页:
<script data-main='/scripts/home-main' src='/scripts/libs/require.js'>
Questions
问题
- How can I use RequireJS to develop different parts of a site?
- Is it recommended to have multiple main.js files?
- How can my different
main.js
files share common modules such as jQuery post optimization?
- 如何使用 RequireJS 开发网站的不同部分?
- 是否建议有多个 main.js 文件?
- 我的不同
main.js
文件如何共享通用模块,例如 jQuery 后期优化?
采纳答案by Thomas Davis
So require.js should always be used on any page to allow for modularity and a clean namespace. I believe each 'app' needs it's own main.js script. When optimizing your site r.js allows for you to exclude modules from the compilation which you should do for jQuery always.
所以 require.js 应该始终用于任何页面,以实现模块化和干净的命名空间。我相信每个“应用程序”都需要它自己的 main.js 脚本。在优化您的站点时,r.js 允许您从编译中排除模块,而您应该始终为 jQuery 执行此操作。
That way require.js will always load jquery.js on the fly and most of the time from the cache. Finding other modules that might be cached between your app and homepage will have to be done at your own discretion and depends on the flow of your users and other factors.
这样 require.js 将始终动态加载 jquery.js,并且大部分时间从缓存中加载。查找可能缓存在您的应用程序和主页之间的其他模块必须由您自行决定,并取决于您的用户流量和其他因素。
It sounds like you have two projects, an app and a marketing site. I believe those should be separated to quite an extend and should have their own respective 'js' folders containing their own main.js.
听起来您有两个项目,一个应用程序和一个营销网站。我相信这些应该分开相当多,并且应该有自己的包含自己的 main.js 的“js”文件夹。
回答by PutzKipa
The requirejs team has some samples for multipage applications on github. Have a look at: https://github.com/requirejs/example-multipage
requirejs 团队在 github 上有一些多页应用程序的示例。看看:https: //github.com/requirejs/example-multipage
Basically you are going to have the following structure:
基本上,您将拥有以下结构:
page1.html: page 1 of the app.
page2.html: page 2 of the app.
js app: the directory to store app-specific modules.
lib: the directory to hold third party modules, like jQuery.
common.js: contains the requirejs config, and it will be the build target for the set of common modules.
page1.js: used for the data-main for page1.html. Loads the common module, then loads app/main1, the main module for page 1.
page2.js: used for the data-main for page2.html. Loads the common module, then loads app/main2, the main module for page 2.
page1.html:应用程序的第 1 页。
page2.html:应用程序的第 2 页。
js 应用程序:存储应用程序特定模块的目录。
lib:存放第三方模块的目录,如jQuery。
common.js:包含 requirejs 配置,它将成为公共模块集的构建目标。
page1.js:用于page1.html的data-main。加载通用模块,然后加载 app/main1,即页面 1 的主模块。
page2.js:用于page2.html的data-main。加载通用模块,然后加载 app/main2,即第 2 页的主模块。