I'm currently preparing an evaluation JavaScript modularization approaches for my corp. We are in process of defining "JavaScript Best Practices" for our projects, modularization is one of the central questions.
我目前正在为我的公司准备一个评估JavaScript模块化方法。我们正在为我们的项目定义“JavaScript最佳实践”，模块化是一个核心问题。
From my research so far revealed two leading approaches:
迄今为止，我的研究揭示了两种主要方法:
With a huge number of loaders, plugins, libraries etc. around them.
有大量的加载器、插件、库等等。
Apart from that there's also goog.provide/goog.require from the Google Closure Library.
除此之外，还有谷歌。需要从谷歌闭包库。
Are there further approaches to consider? Any important/relevant specs I missed?
还有其他方法可以考虑吗?有什么重要的/相关的规格我漏掉了吗?
Our requirements, briefly:
我们的要求,简要:
- Structure JavaScript code in separate files.
- 在单独的文件中构造JavaScript代码。
- Load relevant modules in the runtime.
- 在运行时中加载相关模块。
- ...without having to include every single file as script tag.
- …不需要将每个文件都包含为脚本标记。
- Must not be necessary to maintain an index of JavaScript files.
- 不需要维护JavaScript文件的索引。
- Support aggregation and minification - ability to build and use a single minified/optimized JavaScript file.
- 支持聚合和缩小——能够构建和使用单个缩小/优化的JavaScript文件。
- Be able to use modules in different combinations - there are often different web pages/clients which need different subsets of modules.
- 能够使用不同组合的模块——通常有不同的web页面/客户端需要不同的模块子集。
- Supporting documentation (with JSDoc?).
- 支持文档(JSDoc ?)。
- Suitable for testing.
- 适用于测试。
- Suitable for web, cross-browser.
- 适用于网络,跨浏览器。
- Reasonable IDE support.
- 合理的IDE支持。
Potentially:
潜在的:
- Aligned with ES6 modules.
- 与ES6模块。
- Suitable for Node.js and mobile platforms (like PhoneGap/Cordova).
- 适用于节点。js和移动平台(如PhoneGap/Cordova)。
New suggestions from answers:
新建议的答案:
- ecmascript-harmony plus extra compiler.
- ecmascript-harmony加上额外的编译器。
- angularjs (see the note below).
- angularjs(参见下面的说明)。
- extjs (see the note below).
- extjs(请参阅下面的注释)。
Side notes:
边注:
- The question is not about which approach is better.
- 问题不在于哪种方法更好。
- I am not asking for specific libraries and tools, but rather for approaches and specifications.
- 我不是要求特定的库和工具，而是要求方法和规范。
- I am not specifically asking for an off-site resource. (If there's no SO tag for this, it's probably not reasonable for us to consider it.)
- 我不是特别要求一个非现场的资源。(如果没有这样的标签，我们可能就没有理由去考虑它。)
- A note on frameworks like angualjs or extjs. This is not really suitable in the frame of this quesion. If the project needs a framework (be it AngularJS or ExtJS) then there's mostly no modularization question as the framework must deliver modularization OOTB. If the project does not need a framework, it is an overkill to bring a framework because of the modularization. This is one of the reasons I am specifically not asking about libraries/tools.
- 像angualjs或extjs这样的框架。这在这个问题的框架中并不适用。如果项目需要一个框架(无论是AngularJS还是ExtJS)，那么几乎没有模块化问题，因为框架必须交付模块化OOTB。如果项目不需要框架，那么由于模块化的原因，引入框架就是过犹不及。这是我特别不询问库/工具的原因之一。
7 个解决方案
#1
1
How about ES Harmony?
ES和谐呢?
quote from here: http://addyosmani.com/writing-modular-js/
从这里引用:http://addyosmani.com/writing-modular-js/
Note: Although Harmony is still in the proposal phases, you can already try out (partial) features of ES.next that address native support for writing modular JavaScript thanks to Google's Traceur compiler. To get up and running with Traceur in under a minute, read this getting started guide. There's also a JSConf presentation about it that's worth looking at if you're interested in learning more about the project.
注意:尽管Harmony还在提议阶段，但是您已经可以尝试ES的(部分)特性。接下来，借助谷歌的Traceur编译器，解决了编写模块化JavaScript的本地支持。要在不到一分钟内与Traceur一起起床和跑步，请阅读以下入门指南。如果您有兴趣了解更多关于这个项目的信息，还有一个关于它的JSConf演示值得一看。
hopeThatHelps
hopeThatHelps
#2
1
Another option: the AngularJS module system, as described here. This is really only useful on the client side, however.
另一个选项:AngularJS模块系统，如本文所述。不过，这只在客户端有用。
#3
1
You wrote "I am not asking for specific libraries and tools, but rather for approaches and specifications." however you can look closer to ExtJS 5 environment which fulfils all your requirements.
您写道:“我不是要求特定的库和工具，而是要求方法和规范。”
If you are not interested in such commercial product you can just get to know patterns and solutions in it.
如果您对此类商业产品不感兴趣，那么您可以了解其中的模式和解决方案。
Relation to your requirements:
与你的要求:
Structure JavaScript code in separate files.
在单独的文件中构造JavaScript代码。
It implement Object-Oriented Programming paradigm so you can create classes, subclasses, objects, mixins, plugins. It connect class-based programming and prototype-based programming.
它实现了面向对象编程范例，因此您可以创建类、子类、对象、mixin和插件。它连接了基于类的编程和基于原型的编程。
Worth noting MVVM architecture (View, Controller, ViewModel), data binding, data session (records/entities client-side management).
值得注意的是MVVM架构(视图、控制器、视图模型)、数据绑定、数据会话(记录/实体客户端管理)。
Config system is also quite interesting. It's very handy. The config property is merged from parent class to subclasses and also during object creation you can pass config which will be merged too. It is very useful when we want have customizable and flexible components.
配置系统也很有趣。它非常方便。配置属性从父类合并到子类，在创建对象时，还可以传递将被合并的配置。当我们想要定制和灵活的组件时，它是非常有用的。
Load relevant modules in the runtime.
在运行时中加载相关模块。
Each class may has requires or uses directive which are used when builing application to one file. You can also manually load files.
当将应用程序构建到一个文件时，每个类都可能需要或使用指令。您还可以手动加载文件。
...without having to include every single file as script tag.
…不需要将每个文件都包含为脚本标记。
In dev env files are loaded dynamically (asynchronous or synchronous).
在dev env文件中动态加载(异步或同步)。
In prod env necessary files has been built to one minified file.
在prod env中，必要的文件被构建为一个缩小的文件。
Support aggregation and minification - ability to build and use a single minified/optimized JavaScript file.
支持聚合和缩小——能够构建和使用单个缩小/优化的JavaScript文件。
You can build application with Sencha cmd tool (and do a few other things).
您可以使用Sencha cmd工具构建应用程序(并做一些其他的事情)。
You can use three predefined env (development, testing, production) or create your own (based on config files and ant).
您可以使用三个预定义的env(开发、测试、生产)或创建您自己的env(基于配置文件和ant)。
Be able to use modules in different combinations - there are often different web pages/clients which need different subsets of modules.
能够使用不同组合的模块——通常有不同的web页面/客户端需要不同的模块子集。
You can use workspaces and packages.
您可以使用工作区和包。
Supporting documentation (with JSDoc?).
支持文档(JSDoc ?)。
JS鸭子,教程
Suitable for testing.
适用于测试。
You can do unit tests (PhantomJS, JSLint, PhantomLint, Jasmine).
您可以执行单元测试(PhantomJS、JSLint、PhantomLint、Jasmine)。
You can use dedicated framework like Siesta or other popular testing frameworks like Selenium.
您可以使用专用的框架，如午睡或其他流行的测试框架，如Selenium。
Suitable for web, cross-browser.
适用于网络,跨浏览器。
From offical website:
从官方网站:
Deliver apps on the widest selection of browsers and operating systems with a single code base. Ext JS 5 leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers. Confidently deliver apps to your end users regardless of what browser they are using.
在最广泛的浏览器和操作系统上提供一个单一的代码库。Ext JS 5利用了现代浏览器上的HTML5特性，同时维护了遗留浏览器的兼容性和功能。不管你的终端用户使用什么浏览器，你都要自信地向他们交付应用。
Support: Safari 6+, Firefox, IE 8+, Chrome, Opera 12+, Safari/iOS, Safari / iOS 6+, Chrome/Android, Chrome / Android 4.1+, IE 10+ / Win 8
支持:Safari 6+、火狐、IE 8+、Chrome、Opera 12+、Safari/iOS、Safari/iOS 6+、Chrome/Android、Chrome/Android 4.1+、IE 10+ / Win 8
Supports Cordova and PhoneGap application.
支持Cordova和PhoneGap应用。
Reasonable IDE support.
合理的IDE支持。
I don't know very good IDE with dedicated support for ExtJS but I work on Webstorm and it's fine. Library sources are inside project so autocompletion works (but not 100% perfect).
我不知道有专门支持ExtJS的很好的IDE，但是我在Webstorm上工作，这很好。图书馆资源在项目内部，所以自动完成工作(但不是100%完美)。
Conclusion
结论
I don't want to glorify ExtJS 5. Environment is quite mature and stable but latest version of framework (v5) has a couple bugs and not everything is great. However I could go deeper and get to know principles of that framework which are reasonable, driven in good direction but sometimes bad implemented ;)
我不想美化ExtJS 5。环境是相当成熟和稳定的，但是最新版本的框架(v5)有一些bug，并不是所有的都很好。然而，我可以深入地了解这个框架的原则，这些原则是合理的，朝着好的方向发展，但有时执行得不好;
#4
1
RequireJS is a good approach since it enables dynamic javascript module loading as well as it keeps the code clean. You can also minify the whole modules and it actually performs really fast. It also allows something called as shimming where you can specify the dependencies for a library or any js file such that whenever you try to load it, all the dependencies also follow
rejs是一种很好的方法，因为它支持动态的javascript模块加载，同时保持代码的整洁。你也可以缩小整个模块，它实际上执行得非常快。它还允许使用称为shimming的东西，您可以在其中指定库或任何js文件的依赖项，以便每当您尝试加载它时，所有的依赖项也会随之加载
#5
1
Take a look at systemJS:
看看systemJS:
Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.
符合规格的通用模块加载器——加载ES6模块、AMD、CommonJS和全局脚本。
Designed as a collection of small extensions to the ES6 specification System loader, which can also be applied individually.
作为ES6规范系统加载程序的一组小扩展，也可以单独应用。
Loads any module format, by detecting the format automatically. Modules can also specify their format with meta config. Provides comprehensive and exact replications of AMD, CommonJS and ES6 circular reference handling. Loads ES6 modules compiled into the System.register form for production, maintaining full circular references support. Supports RequireJS-style map, paths, bundles, shim and plugins. Tracks package versions, and resolves semver-compatibile requests through package version syntax - package@x.y.z, package^@x.y.z. Loader plugins allow loading assets through the module naming system such as CSS, JSON or images. Designed to work with the ES6 Module Loader polyfill (9KB) for a combined total footprint of 16KB minified and gzipped. In future, with native implementations, the ES6 Module Loader polyfill should no longer be necessary. As jQuery provides for the DOM, this library can smooth over inconsistiencies and missing practical functionality provided by the native System loader.
加载任何模块格式，通过自动检测格式。模块也可以使用元配置来指定它们的格式。提供AMD、CommonJS和ES6循环引用处理的全面而准确的复制。将ES6模块编译到系统中。注册生产表格，保持完整的循环引用支持。支持需求样式的映射、路径、包、shim和插件。跟踪包版本，并通过包版本语法- package@x.y解析semver-compatibile请求。z,包^ @x.y.z。加载器插件允许通过CSS、JSON或图像等模块命名系统加载资产。设计用于与ES6模块加载器polyfill (9KB)一起工作，总共占用16KB的内存空间。在将来，使用本机实现时，ES6模块加载器polyfill将不再是必需的。正如jQuery为DOM提供的那样，这个库可以消除不一致的地方，以及本机系统加载程序所提供的实用功能的缺失。
Runs in IE8+ and NodeJS.
运行在IE8+和NodeJS中。
The creator of the lib -- Guy Bedford -- is a great presenter as well: systemJS presentation.
lib的创始人盖伊·贝德福德(Guy Bedford)也是一位伟大的演讲者:systemJS presentation。
#6
0
Take a look on a browserify. It implements interesting approach. With browserify you can write code that uses require in the same way that you would use it in Node.
看看浏览器。它实现了有趣的方法。使用browserify，您可以编写使用require的代码，其方式与在Node中使用require相同。
#7
0
There are various libraries available for modular development, From which some full fill your criteria.
有各种可用于模块化开发的库，其中有些库完全满足您的标准。
- System.js System.js is modular development library with some basic features to work with IE8+ and nodejs. It also provides feature to develop modules and you can include it in your main file. For more information about System.js follow https://github.com/systemjs/systemjs
- 系统。js系统。js是模块化开发库，具有一些基本特性，可以与IE8+和nodejs一起使用。它还提供了开发模块的功能，您可以将其包含在您的主文件中。有关系统的更多信息。js遵循https://github.com/systemjs/systemjs
- Require.js The best library for modular development. Provides various useful features and supports older browser too. It supports from IE 6+. Another useful feature of require.js is that it can be used with Rhinojs and nodejs. Implementation is simple as like you include modules in nodejs.
- 要求。js是模块化开发的最佳库。提供各种有用的特性并支持旧浏览器。它支持IE 6+。需求的另一个有用特性。js是可以与Rhinojs和nodejs一起使用的。实现很简单，就像在node . js中包含模块一样。
#1
1
How about ES Harmony?
ES和谐呢?
quote from here: http://addyosmani.com/writing-modular-js/
从这里引用:http://addyosmani.com/writing-modular-js/
Note: Although Harmony is still in the proposal phases, you can already try out (partial) features of ES.next that address native support for writing modular JavaScript thanks to Google's Traceur compiler. To get up and running with Traceur in under a minute, read this getting started guide. There's also a JSConf presentation about it that's worth looking at if you're interested in learning more about the project.
注意:尽管Harmony还在提议阶段，但是您已经可以尝试ES的(部分)特性。接下来，借助谷歌的Traceur编译器，解决了编写模块化JavaScript的本地支持。要在不到一分钟内与Traceur一起起床和跑步，请阅读以下入门指南。如果您有兴趣了解更多关于这个项目的信息，还有一个关于它的JSConf演示值得一看。
hopeThatHelps
hopeThatHelps
#2
1
Another option: the AngularJS module system, as described here. This is really only useful on the client side, however.
另一个选项:AngularJS模块系统，如本文所述。不过，这只在客户端有用。
#3
1
You wrote "I am not asking for specific libraries and tools, but rather for approaches and specifications." however you can look closer to ExtJS 5 environment which fulfils all your requirements.
您写道:“我不是要求特定的库和工具，而是要求方法和规范。”
If you are not interested in such commercial product you can just get to know patterns and solutions in it.
如果您对此类商业产品不感兴趣，那么您可以了解其中的模式和解决方案。
Relation to your requirements:
与你的要求:
Structure JavaScript code in separate files.
在单独的文件中构造JavaScript代码。
It implement Object-Oriented Programming paradigm so you can create classes, subclasses, objects, mixins, plugins. It connect class-based programming and prototype-based programming.
它实现了面向对象编程范例，因此您可以创建类、子类、对象、mixin和插件。它连接了基于类的编程和基于原型的编程。
Worth noting MVVM architecture (View, Controller, ViewModel), data binding, data session (records/entities client-side management).
值得注意的是MVVM架构(视图、控制器、视图模型)、数据绑定、数据会话(记录/实体客户端管理)。
Config system is also quite interesting. It's very handy. The config property is merged from parent class to subclasses and also during object creation you can pass config which will be merged too. It is very useful when we want have customizable and flexible components.
配置系统也很有趣。它非常方便。配置属性从父类合并到子类，在创建对象时，还可以传递将被合并的配置。当我们想要定制和灵活的组件时，它是非常有用的。
Load relevant modules in the runtime.
在运行时中加载相关模块。
Each class may has requires or uses directive which are used when builing application to one file. You can also manually load files.
当将应用程序构建到一个文件时，每个类都可能需要或使用指令。您还可以手动加载文件。
...without having to include every single file as script tag.
…不需要将每个文件都包含为脚本标记。
In dev env files are loaded dynamically (asynchronous or synchronous).
在dev env文件中动态加载(异步或同步)。
In prod env necessary files has been built to one minified file.
在prod env中，必要的文件被构建为一个缩小的文件。
Support aggregation and minification - ability to build and use a single minified/optimized JavaScript file.
支持聚合和缩小——能够构建和使用单个缩小/优化的JavaScript文件。
You can build application with Sencha cmd tool (and do a few other things).
您可以使用Sencha cmd工具构建应用程序(并做一些其他的事情)。
You can use three predefined env (development, testing, production) or create your own (based on config files and ant).
您可以使用三个预定义的env(开发、测试、生产)或创建您自己的env(基于配置文件和ant)。
Be able to use modules in different combinations - there are often different web pages/clients which need different subsets of modules.
能够使用不同组合的模块——通常有不同的web页面/客户端需要不同的模块子集。
You can use workspaces and packages.
您可以使用工作区和包。
Supporting documentation (with JSDoc?).
支持文档(JSDoc ?)。
JS鸭子,教程
Suitable for testing.
适用于测试。
You can do unit tests (PhantomJS, JSLint, PhantomLint, Jasmine).
您可以执行单元测试(PhantomJS、JSLint、PhantomLint、Jasmine)。
You can use dedicated framework like Siesta or other popular testing frameworks like Selenium.
您可以使用专用的框架，如午睡或其他流行的测试框架，如Selenium。
Suitable for web, cross-browser.
适用于网络,跨浏览器。
From offical website:
从官方网站:
Deliver apps on the widest selection of browsers and operating systems with a single code base. Ext JS 5 leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers. Confidently deliver apps to your end users regardless of what browser they are using.
在最广泛的浏览器和操作系统上提供一个单一的代码库。Ext JS 5利用了现代浏览器上的HTML5特性，同时维护了遗留浏览器的兼容性和功能。不管你的终端用户使用什么浏览器，你都要自信地向他们交付应用。
Support: Safari 6+, Firefox, IE 8+, Chrome, Opera 12+, Safari/iOS, Safari / iOS 6+, Chrome/Android, Chrome / Android 4.1+, IE 10+ / Win 8
支持:Safari 6+、火狐、IE 8+、Chrome、Opera 12+、Safari/iOS、Safari/iOS 6+、Chrome/Android、Chrome/Android 4.1+、IE 10+ / Win 8
Supports Cordova and PhoneGap application.
支持Cordova和PhoneGap应用。
Reasonable IDE support.
合理的IDE支持。
I don't know very good IDE with dedicated support for ExtJS but I work on Webstorm and it's fine. Library sources are inside project so autocompletion works (but not 100% perfect).
我不知道有专门支持ExtJS的很好的IDE，但是我在Webstorm上工作，这很好。图书馆资源在项目内部，所以自动完成工作(但不是100%完美)。
Conclusion
结论
I don't want to glorify ExtJS 5. Environment is quite mature and stable but latest version of framework (v5) has a couple bugs and not everything is great. However I could go deeper and get to know principles of that framework which are reasonable, driven in good direction but sometimes bad implemented ;)
我不想美化ExtJS 5。环境是相当成熟和稳定的，但是最新版本的框架(v5)有一些bug，并不是所有的都很好。然而，我可以深入地了解这个框架的原则，这些原则是合理的，朝着好的方向发展，但有时执行得不好;
#4
1
RequireJS is a good approach since it enables dynamic javascript module loading as well as it keeps the code clean. You can also minify the whole modules and it actually performs really fast. It also allows something called as shimming where you can specify the dependencies for a library or any js file such that whenever you try to load it, all the dependencies also follow
rejs是一种很好的方法，因为它支持动态的javascript模块加载，同时保持代码的整洁。你也可以缩小整个模块，它实际上执行得非常快。它还允许使用称为shimming的东西，您可以在其中指定库或任何js文件的依赖项，以便每当您尝试加载它时，所有的依赖项也会随之加载
#5
1
Take a look at systemJS:
看看systemJS:
Spec-compliant universal module loader - loads ES6 modules, AMD, CommonJS and global scripts.
符合规格的通用模块加载器——加载ES6模块、AMD、CommonJS和全局脚本。
Designed as a collection of small extensions to the ES6 specification System loader, which can also be applied individually.
作为ES6规范系统加载程序的一组小扩展，也可以单独应用。
Loads any module format, by detecting the format automatically. Modules can also specify their format with meta config. Provides comprehensive and exact replications of AMD, CommonJS and ES6 circular reference handling. Loads ES6 modules compiled into the System.register form for production, maintaining full circular references support. Supports RequireJS-style map, paths, bundles, shim and plugins. Tracks package versions, and resolves semver-compatibile requests through package version syntax - package@x.y.z, package^@x.y.z. Loader plugins allow loading assets through the module naming system such as CSS, JSON or images. Designed to work with the ES6 Module Loader polyfill (9KB) for a combined total footprint of 16KB minified and gzipped. In future, with native implementations, the ES6 Module Loader polyfill should no longer be necessary. As jQuery provides for the DOM, this library can smooth over inconsistiencies and missing practical functionality provided by the native System loader.
加载任何模块格式，通过自动检测格式。模块也可以使用元配置来指定它们的格式。提供AMD、CommonJS和ES6循环引用处理的全面而准确的复制。将ES6模块编译到系统中。注册生产表格，保持完整的循环引用支持。支持需求样式的映射、路径、包、shim和插件。跟踪包版本，并通过包版本语法- package@x.y解析semver-compatibile请求。z,包^ @x.y.z。加载器插件允许通过CSS、JSON或图像等模块命名系统加载资产。设计用于与ES6模块加载器polyfill (9KB)一起工作，总共占用16KB的内存空间。在将来，使用本机实现时，ES6模块加载器polyfill将不再是必需的。正如jQuery为DOM提供的那样，这个库可以消除不一致的地方，以及本机系统加载程序所提供的实用功能的缺失。
Runs in IE8+ and NodeJS.
运行在IE8+和NodeJS中。
The creator of the lib -- Guy Bedford -- is a great presenter as well: systemJS presentation.
lib的创始人盖伊·贝德福德(Guy Bedford)也是一位伟大的演讲者:systemJS presentation。
#6
0
Take a look on a browserify. It implements interesting approach. With browserify you can write code that uses require in the same way that you would use it in Node.
看看浏览器。它实现了有趣的方法。使用browserify，您可以编写使用require的代码，其方式与在Node中使用require相同。
#7
0
There are various libraries available for modular development, From which some full fill your criteria.
有各种可用于模块化开发的库，其中有些库完全满足您的标准。
- System.js System.js is modular development library with some basic features to work with IE8+ and nodejs. It also provides feature to develop modules and you can include it in your main file. For more information about System.js follow https://github.com/systemjs/systemjs
- 系统。js系统。js是模块化开发库，具有一些基本特性，可以与IE8+和nodejs一起使用。它还提供了开发模块的功能，您可以将其包含在您的主文件中。有关系统的更多信息。js遵循https://github.com/systemjs/systemjs
- Require.js The best library for modular development. Provides various useful features and supports older browser too. It supports from IE 6+. Another useful feature of require.js is that it can be used with Rhinojs and nodejs. Implementation is simple as like you include modules in nodejs.
- 要求。js是模块化开发的最佳库。提供各种有用的特性并支持旧浏览器。它支持IE 6+。需求的另一个有用特性。js是可以与Rhinojs和nodejs一起使用的。实现很简单，就像在node . js中包含模块一样。