在前端开发中，使用 npm 包可以方便地引入第三方库并进行项目构建。而构建工具包 builder-systemjs 则可以轻松地将已经引入的 npm 包打包成适合浏览器加载的 JavaScript 模块。本文将详细介绍 builder-systemjs 的使用方法，并提供示例代码和指导意义。
安装
在使用 builder-systemjs 之前，我们需要安装以下环境：
- node.js (v6.0.0 或以上版本)
- npm 包管理器
接下来，我们可以使用以下命令安装 builder-systemjs：
npm install builder-systemjs --save-dev
其中，--save-dev 参数将 builder-systemjs 添加到项目的开发环境依赖中。
配置
在安装完成后，我们需要配置 builder-systemjs，使其能够正确打包我们的项目。以下是一个基本配置的示例：
-- -------------------- ---- ------- --- ----------- - ------------------- --- ------- - ------------------------------------- ----------- ----------- - --------- ------------ ----------- --- ------------------------------ - ------------------------- -------------- -- - ------ ----------------------- ----------- - --------------- - ------- ---- --- -- -------------- -- - ------------------ --------- --------------- -- --------------- ------- - ------------------ ------- - - --------------- ---展开代码
上述代码中，我们首先定义了一个 packagePath 变量，用于指向项目根目录下的 build 目录。在代码中，我们将 builder-systemjs 的 builder 方法传递一个配置对象，其中包含 configPath（配置文件路径）和 packagePath（打包输出目录）属性。随后通过 builder.loadConfig() 方法加载配置文件.
接着，使用 builder.buildSFX() 方法将我们的应用程序打包成一个单文件运行的模块，其中 app 是我们的默认模块名称，而 packagePath + '/dist/app.js' 指定了打包后的输出路径。在这个示例中，我们还启用了代码压缩的选项，为生产环境优化资源加载效率。当然，根据实际情况可以自由调整。
最后，我们对输出结果进行错误处理和成功提示。
示例
在配置完成后，我们实际上已经完成了使用 builder-systemjs 打包应用程序的所有步骤。但为了更加清晰地理解，我们接下来提供一个打包 React 应用程序的完整示例，其中包含配置文件、源代码和构建脚本。
配置文件
保存以下 JSON 代码到 build/build.config.js 文件中
-- -------------------- ---- ------- --------------- -------- ---- -------------------- ----- ----------- -------- ------------- - ---------- - ----------------------- - --------- --------------------- -- - -- ------ - ------- --------------- -- ---- - -------- -------------------------- ------------ --------------------------------- -- ----- - -------- - ------- -------- -- ------------ - ------- -------- - - ---展开代码
在这个配置文件中，我们定义了 SystemJS 的配置。baseURL 是应用程序的根路径，而 npm: 是一个别名，用于使 SystemJS 可以轻松地定位我们引用的外部库。 babel 转换器用于将 ES6/JSX 代码转换为兼容的 JavaScript，同时支持通过 babelOptions 属性传递 babel 编译器选项。最后，map 和 meta 属性定义了我们使用的 React 库，以及其兼容性格式。
源代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- ---------- ------- --------------- - -------- - ------ ---------- ------------ - - ---------------- -------------- ------------------------------ --展开代码
在这个示例中，我们使用 ES6/JSX 语法编写了一个简单的 React 应用程序，然后使用 import 语句将 React 和 ReactDOM 库引入。接着，我们定义了一个 HelloWorld 类，用于显示页面上的文本。最后，我们使用 ReactDOM.render() 方法将 HelloWorld 实例渲染到页面上。
构建脚本
-- -------------------- ---- ------- --- ----------- - ---- --- ------- - ------------------------------------- ----------- ----------- - --------- ------------ ----------- --- ------------------------------ - ------------------------- -------------- -- - ------ ----------------------- ----------- - --------------- - ------- ---- --- -- -------------- -- - ------------------ --------- --------------- -- --------------- ------- - ------------------ ------- - - --------------- ---展开代码
在这个构建脚本中，除去配置部分，其它代码都与前面的示例相似。不同的是，我们将配置文件和打包输出文件保存在当前目录的 build 和 dist 目录中。
结论
在本文中，我们介绍了如何使用 builder-systemjs 打包前端应用程序。我们首先介绍了如何安装和配置 builder-systemjs，然后提供了一个完整的例子，使你可以快速使用 builder-systemjs 打包 React 应用程序。通过本文的介绍，你可以掌握如何使用 builder-systemjs 简化引入第三方库和打包应用程序的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68953
