使用parcel搭建threejs开发环境

一、什么是parcel

parcel官网：https://www.parceljs.cn/

Parcel是一个快速、零配置的Web应用打包器，可将JavaScript、CSS、HTML和图像等静态文件打包到一个捆绑文件中。它的主要目标是简化Web应用程序的打包过程，使开发人员可以更快速地创建现代Web应用程序。Parcel支持许多不同的文件类型和模块系统，并具有自动编译、自动安装依赖项和热模块更换等功能。它是一个强大而易于使用的开发工具，广泛用于现代Web开发中

二、和webpack对比

优势：

1. Parcel 对开发者来说更加友好，无需配置繁琐，直接使用默认配置即可启动各种项目。
2. Parcel 支持零配置的 Tree Shaking，能够智能地删除未被使用的代码，使得生成的代码更加精简。
3. Parcel 支持多种类型文件的打包，包括 CSS、HTML、JS、图片等，无需使用 loaders。
4. Parcel 提供了一个实时预览功能，可以直接在浏览器中查看修改后的效果，提高了开发效率。

不足：

1. Parcel 的配置项较少，无法实现复杂场景的定制。
2. Parcel 对于第三方库的引用会进行全局打包，存在多个页面中重复引用的情况。
3. Parcel 使用的是串行打包，性能可能不如 Webpack 的并行打包。
4. Parcel 自动化程度过高，不够灵活，无法满足一些细节要求。

我们这里只是写一些threejs的demo,并没有什么复杂的应用场景，所以更加适用parcel搭建一个开发环境

三、使用parcel搭建开发环境

1. 在你正在使用的项目目录下创建一个 package.json 文件：

npm init -y

2. 安装 Parcel

npm install parcel-bundler -D

3. 创建入口文件
   在项目目录下新建src/index.html
   
4. 配置打包命令

• package.json

 "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },

5. 创建css/style.css
   
   如图，我们在assets目录下创建了css/style.css并设置了body的背景色为淡蓝色

6. 创建main/main.js
   

7. 下载three.js库

npm install three --save

8. 在入口文件index.html中引入样式style.css和main.js
   
9. 打包运行

npm run dev

10. 开发环境运行效果
    

好啦，这样我们就基于parcel搭建了一个简单的本地web开发环境啦，它可以自动为我们将打包的代码运行到浏览器，并可以实现hmr(热更新),还等什么，用起来吧