在前端开发中，我们经常需要构建与打包我们的代码以便优化资源，并且更容易部署与维护。@dolittle/build 是一个用于构建 JavaScript、TypeScript、React 和 React Native 应用程序的 npm 包。它基于 webpack，并提供了一系列便捷的工具来处理你的项目。
安装
在使用 @dolittle/build 之前，你需要安装它。首先你需要确保你的项目已经初始化，并拥有 npm 或 yarn。然后，运行以下命令：
使用 npm:
npm install --save-dev @dolittle/build
使用 yarn:
yarn add --dev @dolittle/build
配置
接下来你需要配置你的项目。在你的项目根目录下，创建一个名为 dolittle.build.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- - ---- - - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- - ------------------ - - --------------------------------
----- - --------------------- - - -----------------------------------
-------------- - ----- ----- -- --
-------- ----------
------ --------------- ------ ------------
----- --------- -- --------------
-------- --------- --- ------------- - ------------------------------ - --------------------
------- -
----- --------------- --------
--------- --------- --- ------------- - ----------- - -------------------------
--
---------- -
------------------- -----
----- ----
--
------- -
------ -
-
----- ----------
-------- ---------------
------- --------------
--
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- --------------- --------- -------------
---
--- -----------------------
--- -----------------------
-
---这个 dolittle.build.js 会告诉 @dolittle/build 如何构建你的项目。它处理了一些常见的任务，例如 HTML 和 CSS 的文件提取、Babel 转译、以及自动识别并引入第三方库等等。通过修改这个配置文件，你可以完全控制 @dolittle/build 的工作流程。
使用
运行 npm run build 或 yarn build 命令，就可以构建你的项目了。在默认情况下，@dolittle/build 会生成一个名为 dist 的目录，并在其中包含所有生成的文件。构建完成之后，你可以将 dist 目录部署到服务器上。
另外，@dolittle/build 也有一个集成了 webpack-dev-server 的开发模式。当你运行 npm start 或 yarn start 命令时，它会启动一个热模块替换服务器，并在文件发生改变时自动更新你的页面。
示例
这里提供一个简单的示例来说明如何使用 @dolittle/build。
假设我们有一个名为 my-app 的应用程序，其源代码位于 src 目录下，文件结构如下：
my-app/ |- src/ | |- index.js | |- App.js |- public/ | |- index.html |- package.json
我们首先需要安装 @dolittle/build：
npm install --save-dev @dolittle/build
然后，我们需要创建一个 dolittle.build.js 文件来配置我们的项目：
-- -------------------- ---- -------
----- - ---- - - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- - ------------------ - - --------------------------------
----- - --------------------- - - -----------------------------------
-------------- - ----- ----- -- --
-------- ----------
------ --------------- ------ ------------
----- --------- -- --------------
-------- --------- --- ------------- - ------------------------------ - --------------------
------- -
----- --------------- --------
--------- --------- --- ------------- - ----------- - -------------------------
--
---------- -
------------------- -----
----- ----
--
------- -
------ -
-
----- ----------
-------- ---------------
------- --------------
--
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ---------------------
--- -------------------
--------- --------------- --------- -------------
---
--- -----------------------
--- -----------------------
-
---这个文件的作用是告诉 @dolittle/build 如何构建我们的应用程序。这里我们使用了一些常用的插件，例如 HtmlWebpackPlugin 用于自动生成 HTML 文件、MiniCssExtractPlugin 用于提取 CSS 文件、以及 webpack-manifest-plugin 用于自动生成文件清单。
接下来我们可以使用以下命令构建我们的应用程序：
npm run build
一旦构建完成，你这个命令将会生成一个名为 dist 的目录，并在其中包含所有生成的文件。你可以把这个目录作为一个完整的应用程序部署到您的服务器上。
如果您正在开发过程中，并希望使用 webpack-dev-server 来启动一个本地服务器来自动更新您的代码，那么您可以运行以下命令：
npm start
如果一切顺利，你的应用程序将会在 http://localhost:3000/ 上运行。
至此，您已经掌握了如何使用 @dolittle/build 构建您的应用程序。通过配置你的自己的 dolittle.build.js 文件，你可以完全控制 @dolittle/build 的工作流程，并优化你的应用程序的性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115052