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