Question

我有一个完全用JavaScript构建的大项目，我有一个有序和“内部模块化”的5k行.js文件，它是整个站点的引擎。

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

我也使用jQuery，在大的5k行.js文件中我几乎都在jQuery document.ready事件中，这也带来了麻烦，因为我必须为每个文件创建一个document.ready事件？< / p>

我需要一些方向

Answer 1

使用webpack捆绑代码http://webpack.github.io/docs/tutorials/getting-started/

Answer 2

CommonJS将为您提供require()个模块，这是NodeJS模块系统的基础。 Browserify简化了此实现以便在浏览器中使用，甚至允许您需要Node模块（只要它们不依赖于二进制文件，文件系统和浏览器不支持的其他功能）。

var lib = require('someLibrary');

ECMAScript6（又名：ES6）为javascript带来了导入功能。虽然浏览器尚未完全支持ES6，但您可以使用Babel来＆＃34;转换＆＃34; ES6到ES5。此ES5将利用CommonJS来复制导入行为。

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

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

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

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

如何轻松模块化C / C ++等Javascript

2 个答案: