简介
generator-es-next 是一个 npm 包，主要用于帮助开发者快速创建 ES6/ES7 代码库的结构。它具有以下主要特点：
- 采用 ES6/ES7 规范
- 使用了最新的构建工具和技术，如 Babel、Webpack、ESLint 等
- 自带开发环境以及生产环境的构建配置，使用者只需专注于编写代码即可
本篇文章将详细介绍 generator-es-next 的使用方法，带领读者了解如何利用该工具快速搭建基于 ES6/ES7 规范的前端项目。
安装
在使用之前，你需要先安装 globally 端这个工具。
npm install -g yo generator-es-next
使用
创建项目
在安装完 generator-es-next 后，我们就可以使用 yo 工具创建一个新的项目了。
yo es-next
接下来，你需要填写一些关于项目的基本信息，包括项目名、项目描述、作者、版本等。
然后，在询问是否包含测试配置时，输入 Y 或 N 来决定是否集成测试环境。
最后，等待配置文件的生成。
开发环境
完成配置之后，我们可以通过以下命令启动开发环境：
npm run dev
接着，我们就可以专心编写代码了。generator-es-next 内置了很多常用的 npm 包，例如：
- axios
- lodash
- moment
- react、react-dom
- vue、vue-router
在编写时，只需要像常规 JS 文件一样引入这些包即可。
import axios from 'axios'
axios.get('/api/users')
.then(res => console.log(res.data))
.catch(err => console.error(err))此外，generator-es-next 还使用了 webpack-dev-server 自动刷新机制，当你保存文件后，浏览器将自动刷新页面，展示最新修改的结果。
构建生产环境
在开发结束后，需要将代码发布生产环境。此时，我们可以使用以下命令：
npm run build
该命令会生成一个 dist 目录，并将所有文件及依赖打包到一个压缩文件中，以便于传输和发布。
另外，在构建时，generator-es-next 会对你编写的代码进行 ESLint 检查，并给出对应的错误信息。这也是我们推荐使用 generator-es-next 的原因之一，可以有效规避常见的语法错误。
总结
至此，我们已经学习了如何使用 generator-es-next 快速构建符合 ES6/ES7 规范的前端项目。当然，在实际开发中，我们还需要不断学习和掌握更多的工具和技术，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ff81e8991b448d51ea