Question

在Ember JS项目中，我们有package.json（用于NPM托管）和bower.json（Bower托管），其中我们有所有依赖项/ devDependencies（例如bootstrap，jquery，ember等）

现在这些从各自的注册表下载并在本地下载到node_modules / bower_components文件夹中。

现在我的问题是，当这些文件夹（node_modules / bower_components）包含许多代码依赖项时，当我们进行构建时，我会在＆＃34; dist＆＃34;中看到一些代码。夹。我想了解这个dist究竟是什么？我看到像vendor.css，vendor.js，myappName.css，myappName.js等的东西

那么这些如何构建以及这些代码实际上是什么？它还基于我们的package / bower json配置文件中的内容吗？或者它是基于我们在ember-cli-build.js中的内容？

Answer 1

/dist下的内容应该是您发布应用程序所需的一切。 bower_components中的组件通常通过app.import()中的ember-cli-build.js和来自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构建过程也将指定你的资产（在文件名的末尾添加一个哈希值并在index.html文件中生成一个适当的引用）。

Ember构建输出（dist文件夹）

2 个答案: