Ember構建輸出（dist文件夾）

Question

在Ember JS項目中，我們具有package.json（由NPM管理）和bower.json（由Bower管理），在這里我們具有所有依賴項/ devDependencies（例如bootstrap，jquery，ember等）

現在，這些文件將從各自的注冊表中下載，並本地下載到node_modules / bower_components文件夾中。

現在我的問題是這些文件夾（node_modules / bower_components）包含許多代碼依賴項，而當我們進行構建時，我在“ dist”文件夾中看到了一些代碼。 我想了解這個dist實際上是什么？ 我看到諸如vendor.css，vendor.js，myappName.css，myappName.js等內容

那么這些是如何構造的，以及這些內部實際上包含什么代碼？ 它也是基於我們的package / bower json配置文件中的內容嗎？ 還是基於ember-cli-build.js中的內容？

Answer 1

/dist下放置的內容應該是發布應用程序所需的一切。 bower_components中的組件通常通過ember-cli-build.js app.import()進行加載，並通過已安裝的插件從node_modules進行填充（ember-cli會自動拾取）。

這是文件的快速概要。

index.html --> Generated by ember-cli upon project creation
*          --> Everything from /public
assets/
    appName.css --> All css from under /app
    appName.js  --> All js and compiled templates from /app
    vendor.css  --> Any css imported from bower_components/node_modules (via ember-cli-build.js)
    vendor.js   --> Any js imported from bower_components/node_modules (via ember-cli-build.js)
    test-*.js   --> Test loader/support for ember-cli if you've run "ember test"

大多數文件還帶有.map ，您可以在發布網站時將其排除。

Answer 2

如您所說，您在bower.json和package.json中聲明的依賴項將下載到bower_components和node_modules

當您執行ember build命令時，將發生的事情是，您決定導入ember-cli-build.js所有代碼都將轉儲到vendor.js / vendor.css文件中。 您所有的應用程序代碼（模板/路由/組件/控制器/服務）將放置在my-app-name.js 。 您所有的應用程序樣式都將轉到my-app-name.css文件。 所有這些文件都將放置在dist目錄中，以便您可以對其進行部署。

請參閱以下樣本ember-cli-build.js文件：

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
var app = new EmberApp(defaults, {
 //CSS - Content of these files will go to "vendor.css"
 app.import('vendor/css/bootstrap.css');
 app.import('bower_components/datatables/media/css/jquery.dataTables.css');
 app.import('bower_components/datatables/media/css/dataTables.bootstrap.css');
 app.import('vendor/css/plugins/toastr/toastr.min.css');

 // Javascript - Content of these files will go to "vendor.js"
 app.import('vendor/js/bootstrap.js');
 app.import('vendor/js/plugins/metisMenu/jquery.metisMenu.js');
 app.import('vendor/js/plugins/toastr/toastr.min.js');
 app.import('bower_components/datatables/media/js/jquery.dataTables.js');

 return app.toTree();
};

CSS導入將進入vendor.css文件，而JS導入將進入vendor.js文件。

my-app-name.css來自app/styles文件夾。

如果您進行ember build --environment production則ember build過程還將對您的資產進行糾纏（在文件名末尾添加一個哈希，並在index.html文件中生成適當的引用）。