npm 包 Broilerplate 使用教程

Broilerplate 是一个模板生成器，用于创建前端项目的初始结构，包含了现代化前端 Web 开发所需的基本工具和结构，且易于扩展和修改。Broilerplate 包含了大量的现代化前端构建工具，如 Webpack、Babel、PostCSS 等，同时也提供了常用的工具集如 eslint、stylelint、editorconfig 等，这些工具可以在代码编写的过程中帮助我们维护高质量的代码质量。

安装 Broilerplate

在使用 Broilerplate 之前，我们需要先安装它。可以使用以下命令安装 Broilerplate：

--- ------- ------------ --

它将全局安装 Broilerplate 命令行工具，我们可以在终端中输入 broilerplate 命令来使用该工具。

创建 Broilerplate 模板

在安装完成之后，我们可以使用 Broilerplate 来创建空白项目的模板。使用以下命令来创建项目：

------------ ------ ----------

这将在当前目录下创建一个名为 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 文件，内容如下：

-------------
-----
----
-----
---------
------
-----
-----

这些文件不会在 Git 提交的过程中加入到版本库里。

示例

以下是如何在 Broilerplate 基础上创建一个 React 项目的示例：

  1. 创建一个新的 Broilerplate 项目：
------------ ------ ----------
-- ----------
  1. 安装 React 相关的依赖库：
--- ------- ----- ---------
  1. 在 src/js 目录下，新建一个 components 目录，并创建一个名为 App.js 的文件，文件内容如下：
------ ----- ---- --------

-------- ----- -
  ------ -
    ----------- ------------
  --
-

------ ------- ----
  1. 在 src/js 目录下，新建一个 index.js 文件，文件内容如下：
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- -------------------

-------------------- --- ---------------------------------
  1. 改写 index.html 文件，使其指向 src/js/index.js 文件，文件内容如下：
--------- -----
----- ----------
  ------
    ----- -----------------
    ----- --------------- ---------------------------- ------------------ --
    --------- ---------------
  -------
  ------
    ---- ----------------
  -------
-------
  1. 修改 webpackCommon.js 文件，添加相关配置，以便支持 React 和 JS(X) 文件解析：
-------------- - -
  ------ -
    ---- -------------------
  --

  ------- -
    ------ -
      -
        ----- ----------
        -------- ---------------
        ---- -
          ------- ---------------
          -------- -
            -------- --------------------- ----------------------
          -
        -
      --
    --
  --

  -------- -
    --- -------------------
      --------- -------------
      --------- -------------------
      ------- --------
    ---
  --
--
  1. 运行 webpack-dev-server，查看具体效果：
--- -----

在浏览器中输入 http://localhost:7777，将看到网页中显示 "Hello, world!"，表明 React 已经成功安装并渲染。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8accdc64669dde51f2

阅读全文

猜你喜欢

  • npm 包 broadwayjs 使用教程

    在前端开发中，经常需要使用一些库和工具来加快开发进程。npm（Node Package Manager）是 JavaScript 的包管理工具，提供了很多有用的工具和库供开发者使用。

    4 年前
  • npm 包 brokerjs 使用教程

    简介 npm (Node Package Manager) 是 Node.js 官方的包管理工具，提供了丰富的第三方包和工具供开发者使用。brokerjs 是一个基于 Node.js 的消息中间件库，...

    4 年前
  • npm 包 bruitt-classnames 使用教程

    简介 bruitt-classnames 是一个帮助你在 JavaScript 中进行简单、可读性强的 CSS class 操作的 npm 包。它可以帮你快速生成 CSS class 名称，让你的代码...

    4 年前
  • NPM 包 brule 使用教程

    前言 在前端开发中，经常需要进行表单校验的操作。而 brule 就是一个在前端中实现表单校验的工具包。本文将详细介绍 brule 的使用方法，以及其深度学习和指导意义。

    4 年前
  • npm 包 brunch-es6-transpiler 使用教程

    什么是 brunch-es6-transpiler？ brunch-es6-transpiler 是一个 npm 包，它是一个 brunch 插件，可将 ES6 代码转换为 ES5 代码。

    4 年前
  • npm 包 browser-sync-ejs 使用教程

    什么是 browser-sync-ejs browser-sync-ejs 是一个 npm 包，用于自动化前端开发工作流程。它结合了 browser-sync 和 ejs 两个包的功能，可以实现自动刷...

    4 年前
  • npm 包 browser-sync-logger 使用教程

    在现代的 Web 开发中，日志记录是非常重要的一环。而 browser-sync-logger 就是一款基于 npm 的日志记录工具，它提供了简单易用的 API，能够帮助我们记录浏览器端运行时的日志。

    4 年前
  • npm 包 browser-sync-middleware-spa 使用教程

    什么是 browser-sync-middleware-spa？ browser-sync-middleware-spa 是一个可以与 browser-sync 配合使用的中间件，它可以让单页应用（S...

    4 年前
  • npm 包 browser-sync-nunjucks 使用教程

    在前端开发中，我们经常需要在本地进行调试，并进行页面实时预览。然而，传统的刷新页面方式效率低下，因此出现了一种方便快捷的工具——browser-sync。而在使用 browser-sync 进行前端开...

    4 年前
  • npm 包 brokoli 使用教程

    前言 在前端开发中，我们经常会使用一些工具来帮助我们提高开发效率和代码质量。npm 是前端开发中常用的包管理工具，它提供了丰富的开源包供我们使用。其中，brokoli 包就是一个非常有用的工具，可以帮...

    4 年前
  • npm 包 brokowski 使用教程

    前言 当我们在开发 Web 应用的时候，我们可能会使用一些第三方的库或框架来帮助我们完成一些功能。在 JavaScript 的领域中，npm 就是其中最流行的包管理器之一。

    4 年前
  • npm 包 bromockapis 使用教程

    如果你是一个前端开发者，那么相信你一定知道在网络请求和接口开发中使用 Mock 数据的重要性。而 npm 包 bromockapis 就是一款为前端开发者提供 Mock 数据工具的库。

    4 年前
  • npm 包 bromote 使用教程

    介绍 在前端开发中，经常需要在不同的端口、不同的服务器上进行调试和测试。这时候，我们就需要一种方便快捷的方法来访问这些服务器，并进行测试和调试。 bromote 是一款基于 WebSocket 技术的...

    4 年前
  • npm 包 brobbot-flickr-image 使用教程

    前言 在前端开发中，使用第三方库可以提高开发效率，让我们更快地实现需求。其中，npm 是最常用的 JavaScript 包管理器之一，通过 npm 可以快速方便地引入各种各样的开源包。

    4 年前
  • npm 包 brobbot-giphy 使用教程

    介绍 npm(Node Package Manager) 是 Node.js 官方的包管理工具，负责 Node.js 模块的发布、更新、依赖等。brobbot-giphy 是一个基于 npm 的前端框...

    4 年前
  • npm 包：brobbot-google-image 使用教程

    在开发前端项目时，我们通常需要引用很多第三方库和框架来提升我们的工作效率。而这些库和框架通常都会通过 npm（Node Package Manager）进行管理和安装。

    4 年前
  • npm 包 brobbot-google-image-bomb 使用教程

    简介 brobbot-google-image-bomb 是一个使用了 Google Images API 的 Brobbot 插件，可以随机从 Google Images 中获取指定关键字的图片。

    4 年前
  • npm 包 brobbot-google-image-unsafe 使用教程

    在日常前端开发中，有时会需要使用到一些有趣的外部数据，如图片。而使用 Google image search API 可以轻松地实现通过关键词搜索到相关图片的需求。

    4 年前
  • npm 包 brobbot-impersonate 使用教程

    简介 brobbot-impersonate 是一个基于 Node.js 平台的 npm 包，它可以让你的机器人 (Bot) 像一个指定的用户一样发言和回复消息。这个工具非常适用于测试、演示等场景，也...

    4 年前
  • npm 包 brunch-less-typescript-stack 使用教程

    在进行前端开发时，我们通常需要使用多种技术工具来完成开发任务。其中，使用 brunch-less-typescript-stack 工具包可以让我们更快速地进行前端开发。

    4 年前

相关推荐

    暂无文章