Ember Islands 使用教程

1. 项目目录结构及介绍

Ember Islands 是一个用于在已存在的服务器渲染应用中嵌入 Ember 组件的工具，支持渐进式地将客户端渲染引入到现有应用中。下面是该项目的基本目录结构以及各部分的简介：

• addon: 包含了自定义组件和模版，如 ember-islands 组件，这些组件设计用来在服务器渲染的页面上定位并注入 Ember 组件。
• app: 应用的主要代码，包括路由、控制器、模型、组件和模版等，定义了如何渲染岛屿组件。
• config: 配置文件夹，包含环境相关的配置，比如 environment.js 文件用于设置开发、测试和生产环境的不同配置选项。
• tests: 测试文件夹，存放单元测试和集成测试代码。
• vendor: 第三方库或特殊依赖的存储位置，不通过 NPM 或 Bower 管理，但被项目使用的库。
• bowerrc, editorconfig, ember-cli-build.js, .gitignore, .npmignore, travis.yml, watchmanconfig: 这些是构建、版本控制、持续集成等相关配置文件。
• LICENSE, README.md: 分别包含了软件许可协议和项目说明文档。

2. 项目的启动文件介绍

Ember Islands 的主要启动逻辑并不直接体现在单一的“启动文件”中，而是分散在整个构建流程中。但是，ember-cli-build.js 是一个关键点，它定义了如何构建你的 Ember 应用。这个文件中可以配置诸如第三方库的导入方式、编译设置等。例如，添加特定的 Vendor 文件、或者配置如何处理测试环境中的依赖。运行 ember serve 命令时，此文件会被读取以开始开发服务器。

// 示例ember-cli-build.js片段
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(environment) {
  var ENV = {
    // 其他配置...
    locationType: 'none',
    // 更多配置...
  };
  
  var app = new EmberApp(defaults, {
    // 自定义配置
  });

  // 可能还会在这里进行特定的资源包含或排除
  if (environment === 'development') {
    // 开发环境特有配置
  }

  return app.toTree();
};

3. 项目的配置文件介绍

• config/environment.js：这是项目的核心配置文件，它允许您根据不同环境（开发、测试和生产）来调整应用程序的行为。比如，您可以配置服务器地址、API端点、是否启用某些特性或插件。关键的配置项如 rootElement 对于 Ember Islands 来说尤为重要，因为它决定了 Ember 应用将在页面的哪个容器内渲染，这对于创建“岛屿”至关重要。

// config/environment.js
module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'your-app-name',
    environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // ...
      },
    },

    // 在这里可以根据需要调整
    locationType: 'none', // 当使用Ember Islands时，可能需要设置成 none

    // 更多定制化配置...
  };

  if (environment === 'development') {
    // 仅在开发环境中生效的设置
  }

  return ENV;
};

请注意，具体配置细节可能会随Ember版本更新而变化，因此在实际应用时，应参考当前项目及其文档的最新指示。