如何像 C/C++ 一样轻松地模块化 Javascript

How to easily modularize Javascript like C/C++

我有一个完全用 JavaScript 构建的大型项目，我有一个有序的 "inside modularized" 5k 行 .js 文件，它是整个站点的引擎。

现在我必须制作其他网站（这个网站的扩展），我必须在其中重复很多代码，我的问题是，我已经看到很多使用 Browserify、CommonJS 等的可能性。但是那不是我正在搜索的内容，我正在搜索模块化 JavaScript 就像 C/C++，使 #includes 包含函数或功能的文件并重用这样的代码。我已经这样做了，包括 HTML 中的其他 JS 文件，但 JS 文件只是变量和一些数组，而不是网站的功能。

我也用jQuery，在那个大的5k行.js文件中我几乎都在jQuery document.ready事件中，这也带来了麻烦，因为我会有为每个文件创建一个 document.ready 事件？

我需要一些指导

使用 webpack 打包你的代码http://webpack.github.io/docs/tutorials/getting-started/

CommonJS 会让你 require() 模块，这是 NodeJS 模块系统的基础。 Browserify 简化了这种在浏览器中使用的实现，甚至允许您要求 Node 模块（只要它们不依赖于二进制文件、文件系统和浏览器不支持的其他功能）。

var lib = require('someLibrary');

ECMAScript6（又名：ES6）引入 javascript。虽然浏览器还不完全支持 ES6，但您可以使用 Babel 到 "transpile" ES6 到 ES5。此 ES5 将利用 CommonJS 复制导入行为。

import { SomeClass, someFunction, someValue } from 'some/library';

在所有情况下，您的 javascript 都需要进行某种预处理才能将其转换为浏览器可以理解的 javscript。这通常意味着获取所有单独的源文件并将它们捆绑到一个缩小的捆绑文件中。这减少了浏览器必须发出的请求数。

为了处理所有这些转译和捆绑，存在几种流行的构建系统，包括 Grunt, Gulp and Webpack。 Grunt 比较老，而且通常比较慢，因为它是基于配置的设计。 Gulp 更简单、更快，因为它依赖于 NodeJS 流。 Webpack 是最新的和最强大的，但代价是复杂性。对于您希望做的事情，我建议您查看 Webpack，因为它不仅可以模块化您的 javascript，还可以模块化您的样式表和其他网络资产。

http://webpack.github.io/docs/tutorials/getting-started/