使用BabelJS進行轉譯時如何保持AngularJS文件的順序

Question

我已經開始嘗試使用NPM腳本和BabelJS移植我的ES2015 AngularJS項目。 問題是連接順序不正確，並導致nomod錯誤。

給定此目錄結構：

MyApp
  +- src
  |   +- dashboard
  |   |   +- search-bar
  |   |   |   +- search-bar.directive.js
  |   |   |   +- search-bar.service.js
  |   |   |   +- search-bar.spec.js
  |   |   +- dashboard.module.js
  +- dist
  |   +- js
  |   |   +- dashboard.js

理想情況下， dashboard.module.js應該是第一個文件，因為這是創建實際dashboard模塊的位置，然后是/search-bar的所有內容，而實際上根本不需要任何順序。 搜索欄是功能部件/組件，而不是新模塊，並且是dashboard一部分。

問題似乎在於，簡單地運行BabelJS只會使用與文件系統相同的結構將所有文件連接在一起。

babel ./src/dashboard/**/*.js -o ./dist/js/dashboard.js

弄亂通配符以確保所有文件都被捕獲時，還有一些奇怪的事情。

如何首先處理其他組件之前的dashboard.js ？

Answer 1

事實證明，您可以指定許多glob作為輸入文件。

嘗試使用以下命令：

babel ./src/dashboard/*.js ./src/dashboard/**/ -o ./dist/js/dashboard.js

這將首先處理/dashboard內部緊隨其后的所有.js ，再處理其余目錄。

陷阱：只有在/dashboard根目錄中只有一個文件，這才真正起作用。 如果要添加dashboard.config.js或任何其他文件，則將按該文件系統順序處理這些文件。 不幸的是， dashboard.config.js在dashboard.js之前，因此您的問題將繼續。 :(

另外，如果/dashboard根目錄中還有其他文件，或者不想包含其他類型的.js ，則需要忽略它們。

嘗試：

babel ./src/dashboard/**/*.js ./src/dashboard/**/ --ignore *.spec.js --ignore *.conf.js -o ./dist/js/dashboard.js

這將使事情排在正確的順序，並且還會跳過您可能放置在其中的所有karma.config.js或search-bar.service.spec.js文件。 我假設您不希望將那些實際用於生產中。