概述
panda-builder是一个基于npm的前端构建工具，它使用gulp构建任务来帮助我们自动化构建和部署我们的前端项目。通过panda-builder，我们可以快速地搭建前端项目的开发环境和生产环境。
安装
需要先安装的软件
我们需要先安装node.js环境。
安装完成后，运行以下命令来检查安装是否完成：
---- -- --- --
安装panda-builder
运行以下命令来安装：
--- ------- ------------- ----------
快速开始
初始化
在项目的根目录下，运行以下命令来初始化panda-builder:
------------- ----
开发环境
在项目的根目录下，运行以下命令来启动自动化构建及开发环境：
------------- ---
生产环境
在项目的根目录下，运行以下命令来构建生产环境：
------------- -----
这将会产生一个dist目录，里面存放了构建好的前端项目。
配置
panda.config.js
通过修改项目里的panda.config.js文件可以配置panda-builder。
panda.config.js文件默认如下：
-------------- - -
-------- -
---- ----------------
--
------- -
----- -------
--------- ---------------------
----------- ---
--
---------- -
----- ------------
----- -----
------ --
-
-其中entries表示需要打包的入口文件，output表示构建的输出配置，devServer表示开发环境的服务器配置。
webpack
默认情况下，panda-builder使用webpack构建项目。我们可以通过修改panda.config.js文件来修改webpack的配置，比如修改loader、plugins等。
----- ---- - ---------------
----- ----------------- - ------------------------------
-------------- - -
-------- -
---- ----------------
--
------- -
----- -------
--------- ---------------------
----------- ---
--
---------- -
----- ------------
----- -----
------ --
--
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- -------------------
--------- ----------------------- -------------
--
-
-gulp
panda-builder的构建任务是基于gulp的。我们可以通过修改gulpfile.js文件来修改构建任务的执行顺序及内容。
----- ---- - --------------- ----- ------------ - ------------------------ ------------------ ----------------------- -------------- --------------- ------------ ------------ ------------- ------- ---------------- ----------- ---------------- ----------------------- -------------- --------------- ------------ ------------ ------------- ---------- -------- ------------
结语
panda-builder是一个非常好用的前端构建工具，可以帮助我们快速地搭建前端项目的开发环境和生产环境。适合搭建各类前端项目，包括spa、mpa等不同形态的项目。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc344b5cbfe1ea0612116