在现代的前端开发中，npm包管理器已经成为了必不可少的一部分。随着JavaScript的不断发展，为了提升代码的可读性和可维护性，我们经常使用ES7修饰器，jshint语法检查和guards语法。npm包broccoli-es7-decorator-jshint-guards正好提供了这些功能的集成，让我们可以更高效地进行前端开发。
安装
我们可以使用npm来安装broccoli-es7-decorator-jshint-guards。在控制台中输入下面的命令：
npm install -g broccoli-es7-decorator-jshint-guards
使用
配置文件
要使用broccoli-es7-decorator-jshint-guards，我们需要创建一个配置文件：brocfile.js，并在其中添加代码如下：
-- -------------------- ---- -------
--- ------------ - ----------------------------------
--- ----------- - ---------------------------------
--- ---- - ----- ----- ------
-----------
--- ------- - -
---------- -
---------------
--
------- -
---------------
--
------- -
---------------
-
--
---- - ------------------ -------------------
---- - ----------------- --------------- ----------------
-------------
-------------- - -----其中，your input tree是你的输入tree，是一个broccoli树，包含了你的源文件和你需要的任何其他文件。options是一个对象，包含了ES7修饰器、jshint语法检查和guards语法的参数，它们将以对象字面量的方式传递给broccoli-es7-decorator、broccoli-jshint-guard和broccoli-jshint-guards-guard。
ES7修饰器
使用broccoli-es7-decorator进行ES7修饰器的转换。我们可以在options.decorator对象中设置参数。例如：
-- -------------------- ---- -------
--- ------- - -
---------- -
---- ------
-------- ----------
----------------- -------
-------- -
-------------------------------------------
------------------------------------------
--------------------------------------------
-
-
--我们可以使用dir参数指定输入的目录，然后使用pattern参数匹配我们需要的源文件。然后使用targetExtensions参数指定输出文件的后缀（默认为.js），使用plugins参数对源文件进行ES7修饰器转换。在这里，我们使用babel-plugin-transform-decorators-legacy插件来启用修饰符功能，使用babel-plugin-transform-class-properties插件来启用类属性功能，以及使用babel-plugin-transform-object-rest-spread插件来启用对象拓展功能。
jshint语法检查
我们可以使用broccoli-jshint-guard进行jshint语法检查。我们可以在options.jshint对象中设置参数。例如：
-- -------------------- ---- -------
--- ------- - -
------- -
------- ---------
--------- -
---------- --
------ -----
------- -----
------ -----
------- -----
-
-
--我们可以使用filter参数指定要检查的文件。然后使用jshintrc参数配置jshint规则。在这里，我们设置了esversion参数来指定JavaScript的版本，以及一些其他的规则，例如curly、eqeqeq、undef和unused等。
guards语法
我们可以使用broccoli-jshint-guards-guard提供的guards语法来确保代码符合特定的规则。我们可以在options.guards对象中设置参数。例如：
var options = {
guards: {
filter: ['*.js'],
guardsOptions: {
consoleEnabled: false
}
}
};我们可以使用filter参数指定要检查的文件。然后使用guardsOptions参数配置guards规则。在这里，我们设置了consoleEnabled参数来禁用控制台输出。
示例代码
下面是一个简单的示例代码，我们使用broccoli-es7-decorator-jshint-guards将ES7修饰器、jshint语法检查和guards语法应用到我们的src目录中的所有JavaScript文件中：
-- -------------------- ---- -------
--- ------------ - ----------------------------------
--- ----------- - ---------------------------------
--- ---- - ------
--- ------- - -
---------- -
---- ------
-------- ----------
----------------- -------
-------- -
-------------------------------------------
------------------------------------------
--------------------------------------------
-
--
------- -
------- ---------
--------- -
---------- --
------ -----
------- -----
------ -----
------- -----
-
--
------- -
------- ---------
-------------- -
--------------- -----
-
-
--
---- - ------------------ -------------------
---- - ----------------- --------------- ----------------
-------------- - -----总结
我们可以使用npm包broccoli-es7-decorator-jshint-guards来集成ES7修饰器、jshint语法检查和guards语法。我们可以使用broccoli-es7-decorator来转换ES7修饰器、使用broccoli-jshint-guard来进行jshint语法检查，以及使用broccoli-jshint-guards-guard提供的guards语法来确保代码符合特定的规则。这些步骤将让我们更高效地进行前端开发，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5342