如何輕鬆地模塊化Javascript，如C/C++

Question

我有一個完全使用JavaScript構建的大型項目，我有一個有序的「內部模塊化」5k行.js文件，它是整個站點的引擎。

現在我必須讓其他網站（這個擴展）在其中我必須重複很多代碼，我的問題是，我已經看到很多使用Browserify，CommonJS等的可能性。但這是不是我正在搜索的內容，我正在像C/C++一樣搜索JavaScript，使用#include包含函數或功能的文件，並重新使用這些代碼。我已經在做這個，包括HTML中的其他JS文件，但是這些JS文件只是變量和一些數組，而不是網站的功能。

我也使用jQuery，在那個大的5k行.js文件中，我幾乎都在jQuery document.ready事件內部，這也帶來了麻煩，因爲我必須爲每個文件創建一個document.ready事件？

我需要一些方向，請

Answer 1

CommonJS的會讓你require()模塊，這是該模塊的NodeJS系統的基礎。 Browserify簡化了此實現，以便在瀏覽器中使用，甚至允許您要求節點模塊（只要它們不依賴於二進制文件，文件系統和瀏覽器不支持的其他功能）。

var lib = require('someLibrary'); 

ECMAScript6（又名：ES6）爲JavaScript帶來了進口。雖然瀏覽器尚未完全支持ES6，但您可以使用Babel將ES6「傳輸」爲ES5。這個ES5將利用CommonJS來複制導入行爲。

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

在任何情況下，您的JavaScript都需要進行某種預處理才能將其轉換爲瀏覽器可以理解的javscript。這通常意味着將所有單獨的源文件捆綁成一個縮小的捆綁文件。這減少了瀏覽器的請求數量。

要處理所有這些轉運和捆綁，存在幾個流行的構建系統，包括Grunt,Gulp和Webpack。 Grunt由於其基於配置的設計而較舊並且通常較慢。 Gulp更簡單，速度更快，因爲它依賴於NodeJS流。 Webpack是最新且最強大的，但代價是複雜性。對於你希望做的事情，我建議你看一下Webpack，因爲它不僅可以模塊化你的javascript，還可以模板化你的樣式表和其他Web資源。

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

Answer 2

使用的WebPack捆綁你的代碼http://webpack.github.io/docs/tutorials/getting-started/