Ember CLI Babel 项目教程

Ember CLI Babel 项目教程

ember-cli-babel Ember CLI plugin for Babel 项目地址: https://gitcode.com/gh_mirrors/em/ember-cli-babel

1. 项目的目录结构及介绍

Ember CLI Babel 项目的目录结构如下：

ember-cli-babel/
├── config/
│   ├── config.js
│   └── targets.js
├── lib/
│   ├── babel-options.js
│   └── transpile-tree.js
├── node-tests/
│   └── test-babel-options.js
├── tests/
│   └── unit/
│       └── test-babel-options.js
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .watchmanconfig
├── CHANGELOG.md
├── LICENSE
├── README.md
├── RELEASE.md
├── UPGRADING.md
├── ember-cli-build.js
├── index.js
├── package.json
├── testem.js
└── yarn.lock

目录结构介绍

• config/: 包含项目的配置文件，如 config.js 和 targets.js。
• lib/: 包含项目的主要逻辑文件，如 babel-options.js 和 transpile-tree.js。
• node-tests/: 包含 Node.js 测试文件，如 test-babel-options.js。
• tests/: 包含单元测试文件，如 test-babel-options.js。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件。
• .npmignore: npm 忽略文件。
• .watchmanconfig: Watchman 配置文件。
• CHANGELOG.md: 项目变更日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• RELEASE.md: 发布说明文档。
• UPGRADING.md: 升级说明文档。
• ember-cli-build.js: Ember CLI 构建配置文件。
• index.js: 项目入口文件。
• package.json: 项目依赖和脚本配置文件。
• testem.js: 测试配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js。这个文件是 Ember CLI Babel 插件的入口点，负责初始化和配置插件的行为。

index.js 文件内容概述

module.exports = {
  name: require('./package').name,
  included: function(app) {
    this._super.included.apply(this, arguments);
    // 插件初始化逻辑
  },
  options: {
    babel: {
      // Babel 配置选项
    }
  }
};

启动文件功能

• 初始化插件: included 方法负责初始化插件，并将其添加到 Ember CLI 构建流程中。
• 配置 Babel: options.babel 对象用于配置 Babel 的选项，如插件、预设等。

3. 项目的配置文件介绍

ember-cli-build.js

ember-cli-build.js 是 Ember CLI 项目的构建配置文件，用于配置项目的构建过程。

配置文件内容概述

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

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-babel': {
      // Ember CLI Babel 插件配置
    },
    babel: {
      // Babel 配置
    }
  });

  return app.toTree();
};

配置文件功能

• Ember CLI Babel 插件配置: 通过 'ember-cli-babel' 对象配置插件的行为，如是否启用 TypeScript 转换、是否包含外部助手等。
• Babel 配置: 通过 babel 对象配置 Babel 的选项，如插件、预设、源映射等。

config/targets.js

config/targets.js 文件用于配置项目的目标浏览器和 Node.js 版本。

配置文件内容概述

module.exports = {
  browsers: [
    'last 2 Chrome versions',
    'last 2 Firefox versions',
    'last 2 Safari versions',
    'last 2 Edge versions'
  ],
  node: 'current'
};

配置文件功能

• 浏览器目标: 指定项目支持的浏览器版本。
• Node.js 目标: 指定项目支持的 Node.js 版本。

通过这些配置文件，Ember CLI Babel 插件能够根据项目的需求进行定制化的构建和转换。

ember-cli-babel Ember CLI plugin for Babel 项目地址: https://gitcode.com/gh_mirrors/em/ember-cli-babel