Ember Component CSS 项目教程
1. 项目的目录结构及介绍
Ember Component CSS 项目的目录结构如下:
ember-component-css/
├── addon/
├── app/
├── bin/
├── config/
├── lib/
├── tests/
├── .bowerrc
├── .editorconfig
├── .ember-cli
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .template-lintrc.js
├── .watchmanconfig
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── ember-cli-build.js
├── index.js
├── package.json
├── testem.js
└── yarn.lock
目录结构介绍
- addon/: 包含插件的核心代码。
- app/: 包含应用程序的代码。
- bin/: 包含可执行文件。
- config/: 包含项目的配置文件。
- lib/: 包含库文件。
- tests/: 包含测试文件。
- .bowerrc: Bower 配置文件。
- .editorconfig: 编辑器配置文件。
- .ember-cli: Ember CLI 配置文件。
- .eslintignore: ESLint 忽略文件。
- .eslintrc.js: ESLint 配置文件。
- .gitignore: Git 忽略文件。
- .npmignore: npm 忽略文件。
- .template-lintrc.js: 模板 lint 配置文件。
- .watchmanconfig: Watchman 配置文件。
- CHANGELOG.md: 项目变更日志。
- CONTRIBUTING.md: 贡献指南。
- LICENSE.md: 项目许可证。
- README.md: 项目说明文档。
- ember-cli-build.js: Ember CLI 构建配置文件。
- index.js: 项目入口文件。
- package.json: npm 包配置文件。
- testem.js: 测试配置文件。
- yarn.lock: Yarn 锁定文件。
2. 项目的启动文件介绍
index.js
index.js
是项目的入口文件,负责初始化插件并将其加载到 Ember 应用程序中。以下是 index.js
的简要介绍:
module.exports = {
name: require('./package').name,
included: function(app) {
this._super.included.apply(this, arguments);
}
};
- name: 插件的名称,从
package.json
中获取。 - included: 插件的包含方法,用于将插件加载到应用程序中。
3. 项目的配置文件介绍
ember-cli-build.js
ember-cli-build.js
是 Ember CLI 的构建配置文件,用于配置项目的构建过程。以下是 ember-cli-build.js
的简要介绍:
var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
var CssImport = require('postcss-import');
module.exports = function(defaults) {
var app = new EmberAddon(defaults, {
postcssOptions: {
compile: {
enabled: true,
plugins: [
{
module: CssImport
}
]
}
}
});
return app.toTree();
};
- EmberAddon: Ember CLI 的构建工具类。
- postcssOptions: 配置 PostCSS 插件,例如
postcss-import
。 - app.toTree(): 返回构建后的应用程序树。
package.json
package.json
是 npm 包配置文件,包含了项目的依赖、脚本和其他元数据。以下是 package.json
的简要介绍:
{
"name": "ember-component-css",
"version": "0.6.4",
"dependencies": {
"ember-cli-postcss": "^4.0.0",
"postcss-import": "^12.0.1"
},
"ember-addon": {
"configPath": "tests/dummy/config",
"after": "ember-component-css"
}
}
- name: 项目名称。
- version: 项目版本。
- dependencies: 项目依赖。
- ember-addon: Ember 插件配置,指定配置路径和加载顺序。
通过以上介绍,您可以更好地理解 Ember Component CSS 项目的目录结构、启动文件和配置文件。