前言
现今，作为 Web 前端开发工程师，我们不可避免地需要使用一些自动化工具，比如构建工具、打包工具等等，这其中，我们最常用的是 Yeoman 工具。今天，我来给大家介绍一个基于 Yeoman 的 npm 包 generator-ohmywebpy，它是如何帮助我们提高前端自动化工作效率的。
generator-ohmywebpy 是什么？
generator-ohmywebpy 是一个 Yeoman 生成器，可以帮助我们快速生成前端自动化工程。它内置了以下特性：
- Gulp 自动化构建任务
- Webpack 模块打包
- Babel ES6/7/8 转译支持
- PostCSS 样式处理
- ESLint 代码质量检测工具
- Mocha 测试框架
- Husky Git Hooks
- EditorConfig 代码风格统一
使用 generator-ohmywebpy，我们可以省去大量的配置工作，只需要几个简单的命令，就可以创建出带有上述特性的工程模板。
如何安装 generator-ohmywebpy？
首先，我们需要安装 Yeoman。
npm install -g yo
然后，我们就可以安装 generator-ohmywebpy 了。
npm install generator-ohmywebpy
如何使用 generator-ohmywebpy？
安装完成后，我们来试着创建一个新的工程。
yo ohmywebpy
此时，你需要根据提示输入工程名称、描述和作者信息，generator-ohmywebpy 将会自动创建工程的目录结构。
接下来，我们可以执行以下命令：
-- -------------------- ---- ------- - ---- --- ------- - ------ --- ----- - ---------- --- --- ----- - ------ --- ----
有了以上命令，你就可以在创建出来的工程中愉快地工作了。
常见问题
如何添加第三方依赖？
使用 npm 安装所需依赖即可，例如安装 jQuery：
npm install jquery --save
安装完成后，直接在源代码中使用即可：
import $ from 'jquery';
$(document).ready(() => {
console.log('Hello, jQuery!');
});如何修改样式？
generator-ohmywebpy 默认使用 PostCSS 来处理样式，因此默认情况下，源代码中使用的是 CSSNext 语法。你可以在 postcss.config.js 中配置使用其他的 PostCSS 插件和配置文件。
你也可以自己选择其他样式处理工具，例如 Sass 等，只要在 gulpfile.js 中的 styles 任务中修改相应内容即可。
总结
通过本文，我们介绍了如何使用 generator-ohmywebpy 这个 Yeoman 生成器，以便于我们更为高效地进行前端自动化工作。希望大家可以利用其提供的特性，提高我们的工作效率，创造更好的产品。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f72238a385564ab6824