介绍
ES6是JavaScript的一种新标准，它为JavaScript添加了很多新的特性和语法糖，如箭头函数、解构赋值、模板字符串等。同时，ES6也给模块化开发提供了很好的支持，使得代码的可维护性、可读性都得到了很大的提高。
在使用ES6模块化开发时，引入模块的语法是import moduleName from 'modulePath'，但如果开发者不小心拼错了modulePath，将会导致浏览器中报错，浪费开发时间。
为了解决这一问题，我们可以使用npm包 broccoli-es6-import-validate 来检查引入模块所对应的文件是否存在。
安装
使用 npm 安装 broccoli-es6-import-validate：
npm install --save-dev broccoli-es6-import-validate
使用
在使用 broccoli-es6-import-validate 之前，我们需要先了解一下 broccoli 的概念和用法。Broccoli是一个基于文件夹的静态网站构建工具，支持实时编译，可以自动化地构建、重命名、转换文件。更多详细信息可以参考官方文档。
在理解 broccoli 的基础上，使用 broccoli-es6-import-validate 的方法很简单：
- 引入
broccoli-es6-import-validate：
const validateES6Imports = require('broccoli-es6-import-validate');
- 使用
validateES6Imports包装你的的ES6模块所在目录：
let tree = validateES6Imports('app/modules', { rootPath: __dirname, errorMsg: '引入模块不存在', verbose: true });
validateES6Imports 的第一个参数为 ES6 模块所在目录，第二个参数是可选的选项对象。选项对象中包含了以下属性：
rootPath: String，需要检测的根路径，不传默认为项目根目录。errorMsg: String，错误提示信息，默认为 'Failed import in <file>'。verbose: Boolean，是否在控制台输出进度，默认为 false。
执行完以上代码， broccolli 将会监测所有引入ES6 模块是否存在，并在必要的情况下抛出异常。
示例
下面是一个使用 broccoli-es6-import-validate 的示例，该示例模拟了一个常见的模块开发模式。
app/modules/utils/math.js
export const add = (a, b) => a + b; export const minus = (a, b) => a - b;
app/modules/utils/string.js
export const upper = (str) => str.toUpperCase(); export const lower = (str) => str.toLowerCase();
app/modules/index.js
import { add } from './utils/math'; import { upper } from './utils/string'; console.log(add(1, 2)); console.log(upper('Hello World'));
现在我们可以将 app/modules 目录和 broccoli-es6-import-validate 包装起来：
-- -------------------- ---- ------- ----- ------------------ - ---------------------------------------- ----- ------ - --------------------------- --- ---- - --------------------------------- - --------- ---------- --------- ---------- -------- ---- --- ---- - --- ------------ - -------- ------------- ---展开代码
执行 broccoli build dist 命令后，我们会得到如下提示：
@checking: app/modules/index.js
这表明使用 broccoli-es6-import-validate 发现 index.js 引入了 ./utils/string，但 string.js 模块并不存在。若在开发项目时有所注意，则可以避免类似的错误。
结语
在这篇文章中，我们介绍了 npm 包 broccoli-es6-import-validate，它可以有效地检测 ES6 模块引入错误，避免浪费开发时间。本文还给出了具体的使用方法，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde533e
