Javascript 余烬生成输出（dist文件夹）

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

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

现在我的问题是，虽然这些文件夹（node_modules/bower_components）包含很多代码依赖项，但当我们进行构建时，我在“dist”文件夹中看到一些代码。 我想知道这个地区到底发生了什么？ 我看到像vendor.css、vendor.js、myappName.css、myappName.js之类的东西

那么这些是如何构造的，它们里面到底有什么代码呢？ 它是否也基于包/bower json配置文件中的内容？

---

还是基于我们在ember-cli-build.js中的内容？

发布应用程序所需的一切都放在

/dist

下。来自

bower\u组件的组件

通常通过

app.import（）

在

ember cli build.js

中加载，并通过您安装的加载项从

node\u模块

加载内容（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"

---

大多数文件还附带sourcemaps作为

.map

，您可以在发布网站时将其排除在外。

放置在

/dist

下的内容应该是发布应用程序所需的所有内容。来自

bower\u组件的组件

通常通过

app.import（）

在

ember cli build.js

中加载，并通过您安装的加载项从

node\u模块

加载内容（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"

---

大多数文件还附带sourcemaps作为

.map

，您可以在发布站点时将其排除在外。

正如您所说，您在bower.json和package.json中声明的依赖项将下载到

bower\u组件

和

节点\u模块

在执行

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过程也将对您的资产进行FingerString（在文件名末尾附加一个哈希，并在index.html文件中生成一个适当的引用）。

如您所说，您在bower.json和package.json中声明的依赖项将下载到

bower\u组件

和

node\u模块

在执行

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过程也将对您的资产进行FingerString（在文件名末尾附加一个哈希，并在index.html文件中生成一个适当的引用）。

Thx很多…在ember cli build中，您已经展示了bower_组件的导入…对于节点_模块下的组件，它是如何发生的？实际上我从来没有这样做过，但我相信它的工作方式完全相同。您可能遇到的问题是，某些npm模块可能无法在浏览器中工作，这些模块可能会破坏您的应用程序。我似乎有人建议ember browserify（）能够将一些npm模块导入ember应用程序。只需再问一个问题……在使用bower_组件进行导入时，可以清楚地找到源代码（即在myapp/bower_components/下），但是，不清楚供应商在哪里查找源代码？我的意思是从哪个文件夹开始复制代码？对于供应商来说是一样的。它位于

myapp/vendor

（在创建新的ember cli项目时，应该自动创建该文件夹）。在我的供应商文件夹中，我创建了子文件夹

js/plugins/toasts

，

vendor/js/plugins/metismen/

，等等。。并将这些文件放在那里，但供应商文件夹是默认文件夹。嗯…我在myApp文件夹下没有看到供应商（即使我是通过ember cli生成的）…不确定它是否特定于某个版本。。另外，您是否只复制供应商下需要在生成输出中复制的文件？Thx很多…在ember cli生成中，您显示了bower_组件的导入…对于节点_模块下的组件，这是如何发生的？我实际上从未这样做过，但我相信它的工作方式完全相同。您可能遇到的问题是，某些npm模块可能无法在浏览器中工作，这些模块可能会破坏您的应用程序。我似乎有人推荐我