在前端开发中，我们经常会使用类似于 webpack 或者 broccoli 的工具构建项目。在构建时，我们常常会碰到一些 CommonJS 模块并将其打包成 AMD 模块，这样能够更好地在浏览器端运行。今天，我们要介绍的是一个 NPM 包，它能够将 CommonJS 模块自动转换为 AMD 模块，这个包就是 ember-cli-cjs-transform。
ember-cli-cjs-transform 是什么
ember-cli-cjs-transform 是一个 Ember CLI 插件，它可以帮助我们将 CommonJS 模块转换为 AMD 模块，这样就可以在浏览器端顺利地使用它们了。
安装 ember-cli-cjs-transform:
npm install --save-dev ember-cli-cjs-transform
如何使用 ember-cli-cjs-transform
在你的 Ember CLI 项目中使用 ember-cli-cjs-transform 相当简单。你需要：
- 在你的项目
ember-cli-build.js文件中添加一些配置。 - 在你的项目
app文件夹中要使用 CommonJS 格式的 JavaScript 模块。
让我们看看如何在 Ember CLI 项目中使用 ember-cli-cjs-transform。
配置 ember-cli-cjs-transform
在 ember-cli-build.js 文件中，我们需要添加一些配置，让 ember-cli-cjs-transform 变得工作：
-- -------------------- ---- -------
-------------- - ------------------ -
--- --- - --- ------------------ -
-------------------------- -
----------- -------
-------- -
------ --------
-
-
---
---
-这里我们使用 EmberApp#option() 函数（Ember CLI 提供）指定 ember-cli-cjs-transform 的参数。
extensions: ['js']: 我们需要转换的文件的扩展名。pattern: 一个用于选择你要转化的文件的正则表达式。这里的例子代表我们只会在src目录中的文件中应用转换。
修改你的 CommonJS 模块
现在你需要将你的 CommonJS 模块转换成 AMD 模块。比如这个模块：
// 这个是一个 CommonJS 模块
const foo = require('foo');你需要修改它为：
// 这个是一个 AMD 模块
define(['foo'], function(foo) { });现在，当在浏览器中加载这个模块时，Ember CLI 和 RequireJS 会自动地做出正确的 AMD 转换。
示例代码
以下是一个示例代码，在这个示例中，你会学会如何使用 ember-cli-cjs-transform：
-- -------------------- ---- -------
-- ----------------------------------
--- ----- - -----------------
--- ---------- - -----------------------
------ -------- ------------ -
-- ------------- -- ----------------------- -
----------------------- ------- ----------- -------- ------ ------------------
-------
-
------------ - ------------ -- ---
---------------------- - ------
---------------------------- - -----------
-
------ ------- -
----- -----------------
----------- ----------
--修改为 AMD 模块：
-- -------------------- ---- -------
-- ----------------------------------
---------------- --------------- -------- ------- ----------- -
-- ------------- -- ----------------------- -
----------------------- ------- ----------- -------- ------ ------------------
-------
-
------------ - ------------ -- ---
---------------------- - ------
---------------------------- - -----------
---
------ ------- -
----- ----------------
--现在你已经成功地将 CommonJS 模块转换为 AMD 模块并成功地使用了 ember-cli-cjs-transform。
总结
在前端开发中，我们编写 CommonJS 模块比较方便，但在浏览器端运行时，需要将其转换为 AMD 模块。为了实现这个功能，我们介绍了 NPM 包 ember-cli-cjs-transform，它可以帮助我们轻松地进行转换。在使用 ember-cli-cjs-transform 时，你需要完成以下步骤：
- 在
ember-cli-build.js中添加一些插件配置 - 将你的 CommonJS 模块修改为 AMD 模块
希望本文能够帮助你更好地理解和学习 ember-cli-cjs-transform。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/ember-cli-cjs-transform