当你开始一个新的前端项目时，你会不会觉得这个过程非常繁琐？你需要建立文件夹结构、配置 package.json、安装依赖项、设置 Webpack 和 Babel 等等。如果你需要经常创建新的项目，这个过程就变得非常枯燥和耗时。这时候，一个好的解决方案是使用一个快速初始化工具，一个很好的选择就是使用 generator-es6-fast-setup。
generator-es6-fast-setup 是一个基于 Yeoman 平台的 npm 包，它可以帮助你快速地创建一个初始的 ES6 项目。Yeoman 是一个由 Google 和其他人员共同开发的，用于自动化前端开发流程的脚手架工具。generator-es6-fast-setup 基于 Yeoman 构建，它提供了一个基础的 ES6 模板，包括 Webpack、Babel、eslint 等等，可以让你轻松地开始一个纯净的 ES6 项目。
安装
安装 Yeoman 和 generator-es6-fast-setup
npm install -g yo generator-es6-fast-setup
使用
在你的项目根目录打开命令行工具（如 Terminal、CMD），运行以下命令：
yo es6-fast-setup
这时候，你会被询问若干个问题，需要你填写或确认一些值，大多数问题有默认值，可以直接回车跳过。例如：
? Project name: my-project ? Description: A new project ? Author name: Your name ? Do you want to use eslint? Yes ? Do you want to use react? No ? What type of testing do you want to use? None
运行完这些命令之后，一个新的 ES6 项目就已经在你的当前目录下生成，这个项目中包含了一个简单的配置文件和一个基本的文件结构。
文件结构
generator-es6-fast-setup 有一个很好的文件结构，可以帮助你快速开始开发。它的基本结构如下所示：
|-- node_modules/ |-- src/ | |-- index.js |-- test/ |-- .babelrc |-- .eslintrc |-- package.json |-- webpack.config.js
其中，node_modules 存储项目依赖的第三方包，src 文件夹包含源代码文件，test 文件夹包含测试文件，.babelrc 文件是 Babel 的配置文件，.eslintrc 文件是 eslint 的配置文件，package.json 是项目的配置文件，webpack.config.js 是 Webpack 的配置文件。
示例代码
下面是一个简单的示例代码，其中 index.js 是 ES6 文件，可以使用 import 和 export 对模块进行导入和导出，而不需要使用 CommonJS 的 require 和 module.exports。
// src/index.js
import greeter from './utils';
const greeting = greeter('World');
console.log(greeting); // 'Hello, World!'// src/utils.js
export default function greeter(name) {
return `Hello, ${name}!`;
}除了 ES6 模块的支持，generator-es6-fast-setup 还包含许多其他功能，例如 Webpack 的热重载、代码分离、静态资源管理等等。这些功能使得开发一个现代的 Web 应用变得非常容易和愉快，同时也可以提高产品的质量和性能。
结论
generator-es6-fast-setup 是一个让你从繁琐的项目配置中解放出来的工具，它可以帮助你快速开始一个基于 ES6 的前端项目。它提供了一个干净、简单的开发环境，可以让开发过程更加流畅和高效。如果你需要频繁地创建新的项目，那么 generator-es6-fast-setup 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595d81e8991b448d6c49