Embroider 项目使用教程

Embroider 项目使用教程

embroider Compiling Ember apps into spec-compliant, modern Javascript. 项目地址: https://gitcode.com/gh_mirrors/em/embroider

1. 项目介绍

Embroider 是一个用于将 Ember 应用程序编译成符合规范的现代 JavaScript 的构建系统。它通过三个阶段的构建过程，实现了对现有 Ember 代码的向后兼容，并将其转换为更静态、更可分析的格式，最终输出符合标准的 JavaScript。

Embroider 的主要目标是将 Ember 应用程序和插件转换为现代 JavaScript 标准，使其能够被任何支持标准 JavaScript 的工具处理。这不仅提高了代码的可维护性和性能，还使得 Ember 应用程序能够更好地与现代前端生态系统集成。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 Node.js 和 Yarn。然后，在你的 Ember 项目中添加 Embroider 的依赖：

yarn add --dev @embroider/core @embroider/compat @embroider/webpack webpack

修改 ember-cli-build.js

接下来，编辑 ember-cli-build.js 文件，将 Embroider 集成到你的构建流程中：

// ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const { Webpack } = require('@embroider/webpack');
const { compatBuild } = require('@embroider/compat');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // 其他配置选项
  });

  return compatBuild(app, Webpack, {
    // 可选的 Embroider 配置选项
  });
};

启动应用

完成上述步骤后，你可以像往常一样启动你的 Ember 应用：

ember serve

或者运行测试：

ember test

3. 应用案例和最佳实践

应用案例

Embroider 已经被多个大型、经过严格测试的 Ember 应用程序用于生产环境。这些应用程序通过 Embroider 实现了更高效的构建和更好的代码优化。

最佳实践

1. 逐步启用 Embroider 功能：建议从无选项模式开始，逐步启用 Embroider 的高级功能，如 staticAddonTestSupportTrees、staticAddonTrees、staticHelpers 等。
2. 处理动态组件：在启用 staticComponents 时，可能会遇到动态组件调用的问题。可以通过 packageRules 配置来解决这些问题。
3. 使用 @embroider/router：如果你使用了懒加载引擎，建议使用 @embroider/router 作为 @ember/routing/router 的替代品。

4. 典型生态项目

Embroider 不仅适用于 Ember 应用程序，还可以与其他现代前端工具链集成，如 Webpack、Rollup 和 Parcel。通过 Embroider，Ember 应用程序可以更好地利用这些工具的强大功能，进一步提升开发效率和应用性能。

相关项目

• Webpack: 用于模块打包和代码分割。
• Rollup: 用于构建高效的模块打包器。
• Parcel: 零配置的前端构建工具。

通过 Embroider，Ember 开发者可以轻松地将这些工具集成到他们的项目中，享受现代前端生态系统带来的便利和优势。

embroider Compiling Ember apps into spec-compliant, modern Javascript. 项目地址: https://gitcode.com/gh_mirrors/em/embroider