03-使用parcel搭建three.js开发环境-视频教程

为了方便模块化进行three.js项目的学习和开发，又不用学习太多的配置，增加学习成本，所以就使用Parcel这个web应用打包工具。

Parcel官网：https://v2.parceljs.cn/getting-started/webapp/

1、安装

在开始之前，您需要安装 Node 和 Yarn 或 npm，并为您的项目创建一个目录。然后，使用 Yarn 将 Parcel 安装到您的应用程序中：

yarn add --dev parcel

或者在使用 npm 运行时：

npm install --save-dev parcel

2、项目设置

现在已经安装了 Parcel，让我们为我们的应用程序创建一些源文件。Parcel 接受任何类型的文件作为入口点，但 HTML 文件是一个很好的起点。Parcel 将从那里遵循您的所有依赖项来构建您的应用程序。

创建src文件夹，并且创建index.html文件

设置1个css文件

创建一个main.js

3、打包脚本

到目前为止，我们一直在parcel直接运行 CLI，但在您的package.json文件中创建一些脚本以简化此操作会很有用。我们还将设置一个脚本来使用该命令构建您的应用程序以进行生产。parcel build最后，您还可以使用该字段在一个地方声明您的条目source，这样您就不需要在每个parcel命令中重复它们。

package.json：

安装依赖package.json设置的依赖

yarn install

现在您可以运行yarn build以构建您的生产项目并yarn dev启动开发服务器。

yarn dev