包裝AngularJs應用程序

我正在建設Angular Apps，使用1.x並且已經有一段時間了。我使用Bower來安裝Angular以及與之相關的各種軟件包以及Shivs，JQuery，ChartJs等其他一些軟件。我喜歡使用Bower，因爲它非常快速，並且保持所有內容都在一致的位置供我參考。我使用Grunt以及我的任務管理器，所以我也希望能夠自動化這個過程以實現順利的開發。包裝AngularJs應用程序

現在隨着我的Angular知識的增加，以及我構建的應用程序的規模不斷增加，我發現自己在index.html中包含數十個對文件的調用，我真的很想整理所有這些，理想情況下放到一個不錯的app.js中，使其更加易於管理，不僅適用於我自己，而且適用於任何進入和使用這些應用程序的人。

我見過像requirejs，browserify和commonjs這樣的maaany工具，但它們都提供了我以後的功能，但是當閱讀各種教程或關於這個過程的會議談話時，彼此衝突，哪一個最好。我知道在某種程度上（就像所有這些競爭技術一樣），這是個人喜好，而我傾向於瀏覽，但顯然這會從流程中移除涼亭並使用NPM。如果可能的話，我想堅持鮑爾。我非常喜歡使用它。

有沒有人有任何建議或最佳做法，他們可以提供這可能爲我清除這件事？咕嚕咕嚕/咕嘟咕嘟的簡單連接就是要走的路嗎？

任何有用的意見/答案將不勝感激。

非常感謝。

來源

2016-06-07 Dan Hodson

的問題是過於寬泛，也不會持續很長時間。無論如何，我會親自推薦Webpack + bower-webpack-plugin（+ Gulp/Grunt）包。 Webpack足夠靈活，可以在不利條件下處理Bower和NPM依賴關係。花費一些時間來設置正確的方式，但這是一項穩健的投資。我會考慮concat一個窮人的捆綁系統，這是任何中型到大型項目的一腳。 – estus

這確實是一個冗長的方式，要求圖書館推薦，這是脫離主題。請參閱http://stackoverflow.com/help/on-topic，＃4。你做了一些嘗試來描述這個問題，但實際上只是提到一系列不同的庫。對其他庫的建議甚至是使用相同庫的新方法仍然不同於解決代碼問題。 – Claies

使用ES6模塊和模塊捆綁器（我的建議是Webpack）。

由於您已正確識別RequireJS和commonjs圍繞不同（有點衝突）的目標演變而且不兼容。 ES6模塊是一個standardized模塊化JavaScript的工作，已經得到了轉發器的充分支持（如Babel）。

This article提供了一個很好的介紹這一新功能：

即使JavaScript的從未有過的內置模塊，社區聚集在模塊的簡約風格，這是由ES5 庫支持和更早。這種風格也被ES6採用：

每個模塊是一段代碼，一旦它被加載就會被執行。

在那個代碼中，可能有聲明（變量聲明，函數聲明等）。

默認情況下，這些聲明位於模塊的本地。

您可以將其中的一些標記爲出口，然後其他模塊可以將其導入。

模塊可以從其他模塊導入東西。它經由模塊符，即要麼是字符串指於這些模塊：

相對路徑（「../model/user」）：這些路徑被解釋相對於進口模塊的位置。文件擴展名 .js通常可以省略。

絕對路徑（'/ lib/js/helpers'）：指向直接導入要導入的模塊文件。

名稱（'util'）：需要配置哪些模塊名稱。模塊是單身人士。即使多次導入模塊，也只有一個「實例」存在。這種模塊方法避免了全局變量，唯一的全局變量是模塊說明符。在實際使用中的Javascript模塊的

例子：

//------ lib.js ------ 
export const sqrt = Math.sqrt; 
export function square(x) { 
    return x * x; 
} 
export function diag(x, y) { 
    return sqrt(square(x) + square(y)); 
} 

//------ main.js ------ 
import { square, diag } from 'lib'; 
console.log(square(11)); // 121 
console.log(diag(4, 3)); // 5

來源

2016-06-07 18:02:44 lorefnon

非常感謝@lorefnon。一個非常好的答案。我以前沒有遇到過Webpack，所以這對你的解釋也很理想。 –

包裝AngularJs應用程序

回答

相關問題