前言
在现代 Web 开发中，整个构建过程已经成为了前端工程师必不可少的一部分。构建过程包括代码合并、模块打包、压缩优化等操作，而这些操作需要使用各种前端工具和框架。
npm 是目前最流行的包管理器之一，既可以用来管理生产环境的依赖库，也可以用来管理开发构建过程中所需要的依赖包。本文将介绍怎样使用 @creatartis/creatartis-build，这是一个用于前端项目构建过程中的 npm 包。
安装
@creatartis/creatartis-build 可以通过 npm 进行安装。使用 npm 包管理器的方式进行安装：
--- ------- ---------------------------- ----------
或使用 yarn：
---- --- ---------------------------- -----
使用
@creatartis/creatartis-build 支持经典的 JavaScript 和 TypeScript 两种主流语言。
在 package.json 中添加 build 命令：
-
---------- -
-------- ------------------
-
-接下来，我们需要添加 creatartis-build.config.js 配置文件，在这个文件中可以配置您的构建过程。
示例配置：
----- ---- - ----------------
-------------- - -
----- ----------
------ -
---- --------------
--
------- -
----- -------------------- --------
--------- -----------
--
-------- -
----------
-----------
--------------
--------- - -------- -------- ---
--
------ -
-------- --------------
--
------- -
------ -
------------- --
----------------- -
-
-
--该配置文件定义了 webpack 的输入和输出配置。支持的类型有 webpack 和 babel，可以根据自己的项目需要进行配置。更多选项可以在文档中查看。
最后，在命令行中输入：
--- --- -----
深入学习
这一部分，我们将使用一个包含 React 和 TypeScript 的项目来深入学习 @creatartis/creatartis-build 在开发中的使用。
开始
首先我们需要创建一个新的 React 项目。使用 create-react-app 可以轻松创建：
--- ---------------- ------ ------------
接下来，我们将添加 @creatartis/creatartis-build 包。
--- ------- ---------------------------- ----------
接下来，配置 creatartis-build.config.js。如下：
----- ---- - ----------------
-------------- - -
----- ----------
------ -
---- ---------------
--
------- -
----- -------------------- ---------
--------- -----------
--
-------- -
----------
-----------
--------- - -------- --------- ---
-------- - ----- --------- --- --- ---
-------- - ------ --- ---- ---
---------
--
------ -
-------- --------------------- -----------------------
-------- -----------------------------------
--
------- -
------ -
------------- --
----------------- -
-
-
--这个配置文件定义了输入和输出文件的位置 - TypeScript 文件的位置和 webpack 输出的目录与文件名。此外，我们添加了几个构建插件，用于处理 TypeScript、ESLint、Copy 文件（将 public 中的文件复制到输出文件夹中）、遵循模板生成 index.html 文件，和处理 SCSS 样式表。
管理依赖
接下来，我们需要为项目中的依赖项配置 @creatartis/creatartis-build 需要的依赖项。
webpack
我们需要添加 webpack、webpack-cli、webpack-dev-server 和一些必要的规则和加载项：
--- ------- ------- ----------- ------------------ ---------- --- ------- ----------- ----------------- ------------------- ------------------------------- ------------ ---------- ----------- ------------------- ----------------------- ----------- ------------ --------- ---------- ---------- ----------
其中，@babel/core、@babel/preset-env、@babel/preset-react、@babel/plugin-transform-runtime 是使用 TypeScript 时需要的 Babel 组件部分。
TypeScript
我们需要添加 TypeScript 和 TypeScript 相关的 loaders：
--- ------- ---------- ----- ------------------------ --------- ------- ----------
结语
@creatartis/creatartis-build 包可以让你集中精力于开发，而不是关注每个构建步骤的细节。这个包支持经典的 JavaScript 和 TypeScript，在构建 React 应用程序时也很容易使用。
完整示例项目代码：https://github.com/creatartis/creatartis-build/tree/v0/examples/create-react-app
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/103137