Broilerplate 是一个模板生成器，用于创建前端项目的初始结构，包含了现代化前端 Web 开发所需的基本工具和结构，且易于扩展和修改。Broilerplate 包含了大量的现代化前端构建工具，如 Webpack、Babel、PostCSS 等，同时也提供了常用的工具集如 eslint、stylelint、editorconfig 等，这些工具可以在代码编写的过程中帮助我们维护高质量的代码质量。
安装 Broilerplate
在使用 Broilerplate 之前，我们需要先安装它。可以使用以下命令安装 Broilerplate：
npm install broilerplate -g
它将全局安装 Broilerplate 命令行工具，我们可以在终端中输入 broilerplate 命令来使用该工具。
创建 Broilerplate 模板
在安装完成之后，我们可以使用 Broilerplate 来创建空白项目的模板。使用以下命令来创建项目：
broilerplate create my-project
这将在当前目录下创建一个名为 my-project 的文件夹，并将 Broilerplate 的初始结构放入其中。你的项目初始结构如下：
-- -------------------- ---- ------- ---------- --- ------ - --- -------------- - --- ------------- - --- ---------- - --- ------- --- --- - --- ------ - --- -- - - --- ------ - - --- -------- - --- ---- - - --- ------------ - - --- ------------------ - - --- -------- - --- ---------- --- -------- --- ------------- --- ------------- --- ------------ --- ---------- --- ------------ --- ----------------- --- -----------------
这个模板包含了一些常规前端项目的基本目录结构，如 assets、js、scss，以及常用的配置文件和工具，如 .babelrc、.editorconfig、.eslintignore、.eslintrc.js、.gitignore、package.json、postcss.config.js 和 webpack.config.js。这些文件的作用在下面会有详细说明。
项目配置
package.json
package.json 文件用于管理项目依赖。Broilerplate 初始化项目时，会默认生成一个 package.json，其中包含了一些基础依赖库的配置，如 webpack、babel、postcss、eslint 等。
我们可以在 package.json 中修改一些配置，例如修改项目名称、描述、开发者等基本信息，在 dependencies、devDependencies 属性下增加或删减相应依赖库。
-- -------------------- ---- -------
-
------- -------------
-------------- --- ---------
---------- --------
------- -----------
---------- -
-------- ------------------- -------- -----------------------
-------- -------- -------- ----------------------
------- -------- -------- ---------------
--
--------- ----- ------
---------- ------
--------------- -
---------------- ---------
------------ --------
--
------------------ -
--------------- ---------
------------- ----------
--------------- ----------
--------------- ---------
------------------- ---------
----------------------- ---------
---------------------- ---------
------------- ---------
--------- ---------
----------------------- ----------
---------------- ---------
----------------------- ----------
------------------------- ---------
---------------------- ----------
-------------- ---------
---------------------- ---------
------------ ----------
----------------- ---------
-------------- ---------
--------------- ---------
------------ ----------
---------------------------- ----------
--------------------------- ----------
------------- ---------
---------- ----------
-------------- ----------
--------------------- ----------
---------------- --------
-
-config
config 目录用于存放不同环境下的配置文件以及环境变量。
development.js：开发环境下的配置文件。production.js：生产环境下的配置文件。staging.js：测试环境下的配置文件。test.js：单元测试的配置文件。
这些文件包含了各种常见的 webpack 配置，如入口、输出、loader 配置以及 loader 链式执行等。使用 webpack-merge 库，其能够非常便捷地完成不同配置文件的合并。例如：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ------------ - -------------------------
----- ------------ - -------------------------------
-------------- - -------------------------- -
-------- -------------------------------
-------- -
--- ----------------------
-------------- -
--------- ------------------------------
--
---
--
------- -
------ --
----- ----------
---- -
---------------
-
------- -------------
-------- -
-------------- --
---------- -----
--
--
-
------- -----------------
-------- -
------ ----------
---------- -----
-------- -- -- -
-------------------------
--------- --- ---- ----- - -----------
----- -----
---
--
--
--
-
------- --------------
-------- -
--------- ----- -- -
-- ------------------------- --- -- -
----- -------- - --------------------------
----- -------------- - ---------------------------------------
------ - ----- ---------------------------- --
-
------ - ----- --- --
--
---------- -----
--
--
--
---
--
---------- -
------------ ----------------------- ----------
----- ----------
----- -----
--------- -----
---- -----
----- -----
-------- -
--------- -----
------- -----
--
--
---webpack.config.js
webpack.config.js 文件是 webpack 的主配置文件，也是 Broilerplate 最核心的部分之一，其包含了最基本的入口、出口以及常见的 loader 的配置。具体每一部分的作用会在下面有详细说明。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ --------------------
------- -
--------- ------------------------
----- ----------------------- -----------
----------- ---
--
-------- -
----------- ------- -------- ---------
------ -
---- ----------------------- -----------
--
--
------- -
------ --
----- --------
-------- ---------------
------- ---------------
-- -
----- ---------------------------
------- -------------
-------- -
------ -----
----- -------------------------------
--
---
--
-------- -
--- -------------------
------ ---------------
------- -
------------------- -----
--------------- -----
-------------------------- -----
--------------------------- -----
------------------------------ -----
---------------- -----
--
--------- -------------
--------- -------------------
---
--
--.babelrc
如果你开发的项目需要转换 ES6 引入的模块或使用箭头函数时需要支持 IE9 及以下浏览器，则需要在项目里使用 babel 转码。Broilerplate 已经默认在 package.json 中加入了 babel 相关的依赖库，如 babel-core、babel-loader、babel-preset-env 等。
在使用时，还需要在项目根目录下创建 .babelrc 文件，并添加相应的 babel 预设（preset）以及插件（plugin），来告诉 babel 编译器该如何进行转码，以及该支持哪些特性。例如：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- -
--- -- --
-
--
---------- -----
--
--
---------- -
-------------------------
--------------------------------------
-------------------------------
-----------------------------
--------------------- -
----------- ------
-------------- ----
--
-
-.editorconfig
EditorConfig 是一个为大多数编辑器和 IDE 提供通用配置的文件格式和插件。通过在项目中创建 .editorconfig 文件，你可以定义项目的编码风格，并与你的同事共享。Broilerplate 也默认添加了 .editorconfig 文件，内容如下：
-- -------------------- ---- ------- ---- - ---- --- ----------- - -- ------- - ----- ------------ - ----- ----------- - - ------------------------ - ---- -------------------- - ----
.eslintrc.js
ESLint 是一个优秀的 JS 代码检查和规范的插件，可以帮助你在开发过程中维护良好的代码风格，并提升代码质量。Broilerplate 已经默认在项目里面添加了 eslint 相关的依赖库，例如 eslint、eslint-config-airbnb 等。
在使用时，还需要在项目根目录下创建 .eslintrc.js 文件，并定义相应的编码风格和规范，例如：
-- -------------------- ---- -------
-------------- - -
-------- ---------
------- ---------------
---- -
-------- -----
----- -----
---- -----
----- -----
--
-------- -
------- -----
--
-------- -
--------------
--
------ -
----------------- -------
------------------- ------
----------------------------- --------
------------------------------ -------
------------------------------- --- - ----------- ------- ------- ---
--
--.gitignore
Git 是一个分布式版本控制系统，可以保存项目的所有历史版本并清晰记录其变更。在完整地记录所有变更的同时，Git 也可以帮助我们避免一些不必要的文件和文件夹被加入到最终提交的版本库中，例如编译产生的文件、不必要的依赖库等等。Broilerplate 也在项目中预设了 .gitignore 文件，内容如下：
node_modules/ dist/ log/ temp/ .DS_Store *.lock *.log *.swp
这些文件不会在 Git 提交的过程中加入到版本库里。
示例
以下是如何在 Broilerplate 基础上创建一个 React 项目的示例：
- 创建一个新的 Broilerplate 项目：
broilerplate create my-project cd my-project
- 安装 React 相关的依赖库：
npm install react react-dom
- 在
src/js目录下，新建一个components目录，并创建一个名为App.js的文件，文件内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
----------- ------------
--
-
------ ------- ----- 在
src/js目录下，新建一个index.js文件，文件内容如下：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));- 改写
index.html文件，使其指向src/js/index.js文件，文件内容如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- -----------------
----- --------------- ---------------------------- ------------------ --
--------- ---------------
-------
------
---- ----------------
-------
-------- 修改
webpackCommon.js文件，添加相关配置，以便支持 React 和 JS(X) 文件解析：
-- -------------------- ---- -------
-------------- - -
------ -
---- -------------------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
--
--
-------- -
--- -------------------
--------- -------------
--------- -------------------
------- --------
---
--
--- 运行 webpack-dev-server，查看具体效果：
npm start
在浏览器中输入 http://localhost:7777，将看到网页中显示 "Hello, world!"，表明 React 已经成功安装并渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde51f2