在前端开发中，ES6 已经成为了必备的技能。为了在项目中更好地使用 ES6 语法和模块化机制，我们可以使用 npm 包 es6-starter-kit 来搭建自己的项目模板。
安装
使用以下命令来安装 es6-starter-kit：
npm install -g es6-starter-kit
安装完成后，就可以在命令行中使用 es6-starter-kit 命令了。
搭建项目
我们可以使用 es6-starter-kit 命令来搭建项目，如下所示：
es6-starter-kit my-project
其中，my-project 为你希望创建的项目名称。执行完命令后，es6-starter-kit 会在当前目录下创建一个名为 my-project 的文件夹，并且包含一些必要的文件。
目录结构
使用 es6-starter-kit 创建的项目，具备如下的目录结构：
-- -------------------- ---- ------- ----------- --- ---- - --- ----------- - - --- -------- - --- -------- - --- ---------- --- ----- - --- ----------- - - --- -------- - --- -------- - --- ---------- --- ------------ --- ----------------- --- ----------
src/目录下放置了项目的源文件，包括组件、样式和入口文件等。dist/目录下放置了项目打包后的文件。package.json文件是 npm 的配置文件，包含了项目名称、依赖等信息。webpack.config.js文件是 webpack 的配置文件，用于指定 webpack 如何打包。index.html文件是项目的首页。
开始使用
使用 es6-starter-kit 创建的项目已经可以使用了。你可以在 src/ 文件夹下写入你的 ES6 代码，然后使用以下命令对代码进行编译和打包：
npm run build
编译完成后，生成的文件会保存在 dist/ 文件夹下。
在 index.html 文件中引入 dist/ 目录下对应的文件即可在浏览器中查看你的项目效果。
Babel 配置
使用 es6-starter-kit 创建的项目已经内置了 Babel 编译器，可以将 ES6 转换为浏览器可以执行的代码。默认情况下，Babel 编译器已经设置好了一些常用的转换规则，如果需要添加其他的转换规则，可以修改 webpack.config.js 文件。
例如，如果需要添加对 async/await 的支持，可以在 webpack.config.js 文件中加入如下配置：
-- -------------------- ---- -------
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -----------------------------------
-
-
-其中，@babel/preset-env 可以让 Babel 根据当前的环境自动选择需要的转换规则，@babel/plugin-transform-runtime 可以提供一些帮助函数和运行时支持，同时避免代码重复。
案例示例
以下是一个使用 es6-starter-kit 搭建的简单的 Todo List 应用：
-- -------------------- ---- -------
-- --------------------------
------ ------- ----- -------- -
------------- -
---------- - ---
-
--------- -
----------------------
-
------------- -
------------------------ ---
-
-------- -
------ -
----
--------------------- -- -----------------------------
-----
--
-
-
-- ------------
------ -------- ---- ---------------------------
----- -------- - --- -----------
------------------ ----
------------------ ----
---------------------------------------- - ------------------
-- ----------
------
---- ---------------
------- -------------------------------
-------在该案例中，我们定义了一个 TodoList 类，其中包含了添加、删除和渲染待办事项列表的方法。在 src/index.js 中，我们实例化了该类，并将渲染后的 HTML 插入到了 index.html 中的 #app 元素中。
结论
使用 es6-starter-kit 可以方便快捷地搭建一个支持 ES6 的前端项目，可以更好地应用 ES6 语法和模块化机制。同时，我们可以根据实际需求在项目中进行定制化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564ef81e8991b448e1918