前言
开发一个前端项目时，我们经常需要使用很多第三方库，包括 jQuery、React、Underscore 等等。通过 npm 包管理工具，我们可以快速简便地引入这些库。但是，有时候这些库的代码不是 ES6 标准的，而我们在项目中却希望使用 ES6 特性。就会出现一些莫名其妙的问题。本文介绍如何使用 npm 包 systemjs-plugin-traceur 来解决这个问题。
systemjs-plugin-traceur 简介
systemjs-plugin-traceur 是一个 SystemJS（一种模块加载器）插件，它可以让开发者使用 ES6 作为模块定义，而且不需要额外的编译器或工具。这个插件使用 Traceur 编译器编译 ES6 的模块定义为 AMD（异步模块定义）格式。然后使用 SystemJS 的 AMD moudles 功能加载模块。
安装
安装 systemjs-plugin-traceur 实际上分为两步：
1.安装 SystemJS
由于 systemjs-plugin-traceur 是 SystemJS 插件，所以需要先安装 SystemJS。
npm install systemjs --save
2.安装 systemjs-plugin-traceur
npm install systemjs-plugin-traceur --save
配置
1.在页面中引入 SystemJS 和 systemjs-plugin-traceur 的 js 文件。
<script src="node_modules/systemjs/dist/system.js"></script> <script src="node_modules/systemjs-plugin-traceur/dist/systemjs-plugin-traceur.js"></script>
2.配置 SystemJS.
-- -------------------- ---- -------
---------------
---- -
----------------- ----------------------------------------------------------------------
--
----------- -----------------
----- -
------- -
------- ----------------
-
-
---示例
下面是一个使用 systemjs-plugin-traceur 加载一个 ES6 的模块的例子：
1.创建一个 ES6 的模块文件 greet.js。
export function greet(name) {
console.log(`Hello ${name}!`);
}2.创建一个主文件 index.js 引入 greet 。
import { greet } from "./greet";
greet("Alice");3.在页面中加载 index.js 文件。
<script src="config.js"></script>
<script>
System.import('./index');
</script>总结
systemjs-plugin-traceur 插件可以让我们使用 ES6 作为模块定义。并且这个插件同时可以解决模块编译的问题。使用过程中需要注意的是，记得先安装 SystemJS，然后再安装 systemjs-plugin-traceur。
通过本文的介绍，希望大家能够更好地了解 systemjs-plugin-traceur，更加方便地使用 ES6 作为模块定义，从而更加高效地开发前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc2d6b5cbfe1ea06120e0