使用parcel搭建three.js开发环境（Parcel搭建开发环境，手把手教学）

偏执的太偏执、 2023-10-08 22:29 53阅读 0赞

#### 简述：Parcel 快速，零配置的 Web 应用程序打包器，比webpack更加轻量级，项目中用到的任何关于sass、less、图片、路径、及各种解析都是零配置，拿来即用型，只需要在package.json中引入对应的parcel、parcel-bundler，然后根据官网提示配置即可，它使用 worker 进程去启用多核编译，同时有文件系统缓存，即使在重启构建后也能快速再编译，实现实时编译。 ####

####    1、在Vs Code中新建parcel\_dem文件，cd进去； ####

![749aaaa562214c11adb8f4f1f17d5de6.png][]

![b1cb7078f80b475aa6654fc2d61dd5dd.png][]

####    2、然后使用npm init命令，生成package.json文件（输入命令后，一直按回车健）； ####

npm init

![5c3ed5fb8b534321b60f20286dd6261e.png][]

![ddedfac471284b4ab12ca864bd585447.png][]

####  ####

#### 3、安装Parcel依赖，生成node\_modules文件； ####

npm install parcel-bundler

#### ![d8582e39fb464f9eb8e5f819408b5050.png][]    ####

#### 4、在package.json中，修改目标文件和输出文件； ####

![ef85ac1001fc4f8c927ca7830ca840ef.png][]

**官网文档 ：**

![20959d6625db4199829ebcab48d25ac7.png][]

**更换目标文件和输出文件文件：**

![2902a4ea68914fcab304e8afe75e7325.png][]

**这是整体的目录结构，src文件下的所有子文件都是自己创建的：**

![496eb6b730e746f5b53f6b17f0b4426c.png][]

####  ####

#### 5、安装生产环境所需依赖； ####

npm install parcel-bundler --save-dev

####  ####

#### 6、安装three.js依赖； ####

npm install three

####  ####

#### 7、在js中导入 three.js核心库； ####

![ff897b8629f142d5a9847609826eef18.png][]

#### 8、npm run dev 启动项目，控制台输出成功； ####

![1a1c2babfc6d40f881b8ba5865dc5fab.png][]

![9e97026ff8bf45bfbdaa623104bf1b53.png][]

[使用threejs生成一个简单的3d模型![icon-default.png_t_N2N8][]https://blog.csdn.net/weixin\_65793170/article/details/129747723?spm=1001.2014.3001.5501][threejs_3d_icon-default.png_t_N2N8_https_blog.csdn.net_weixin_65793170_article_details_129747723_spm_1001.2014.3001.5501]

**More>>**

[Parcel1官网![icon-default.png_t_N2N8][]https://www.parceljs.cn/getting\_started.html][Parcel1_icon-default.png_t_N2N8_https_www.parceljs.cn_getting_started.html]

[Parcel2官网![icon-default.png_t_N2N8][]https://v2.parceljs.cn/docs/][Parcel2_icon-default.png_t_N2N8_https_v2.parceljs.cn_docs]

[Three.js官网![icon-default.png_t_N2N8][]https://threejs.org/][Three.js_icon-default.png_t_N2N8_https_threejs.org]

[749aaaa562214c11adb8f4f1f17d5de6.png]: https://img-blog.csdnimg.cn/749aaaa562214c11adb8f4f1f17d5de6.png
[b1cb7078f80b475aa6654fc2d61dd5dd.png]: https://img-blog.csdnimg.cn/b1cb7078f80b475aa6654fc2d61dd5dd.png
[5c3ed5fb8b534321b60f20286dd6261e.png]: https://img-blog.csdnimg.cn/5c3ed5fb8b534321b60f20286dd6261e.png
[ddedfac471284b4ab12ca864bd585447.png]: https://img-blog.csdnimg.cn/ddedfac471284b4ab12ca864bd585447.png
[d8582e39fb464f9eb8e5f819408b5050.png]: https://img-blog.csdnimg.cn/d8582e39fb464f9eb8e5f819408b5050.png
[ef85ac1001fc4f8c927ca7830ca840ef.png]: https://img-blog.csdnimg.cn/ef85ac1001fc4f8c927ca7830ca840ef.png
[20959d6625db4199829ebcab48d25ac7.png]: https://img-blog.csdnimg.cn/20959d6625db4199829ebcab48d25ac7.png
[2902a4ea68914fcab304e8afe75e7325.png]: https://img-blog.csdnimg.cn/2902a4ea68914fcab304e8afe75e7325.png
[496eb6b730e746f5b53f6b17f0b4426c.png]: https://img-blog.csdnimg.cn/496eb6b730e746f5b53f6b17f0b4426c.png
[ff897b8629f142d5a9847609826eef18.png]: https://img-blog.csdnimg.cn/ff897b8629f142d5a9847609826eef18.png
[1a1c2babfc6d40f881b8ba5865dc5fab.png]: https://img-blog.csdnimg.cn/1a1c2babfc6d40f881b8ba5865dc5fab.png
[9e97026ff8bf45bfbdaa623104bf1b53.png]: https://img-blog.csdnimg.cn/9e97026ff8bf45bfbdaa623104bf1b53.png
[icon-default.png_t_N2N8]: https://csdnimg.cn/release/blog_editor_html/release2.2.4/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N2N8
[threejs_3d_icon-default.png_t_N2N8_https_blog.csdn.net_weixin_65793170_article_details_129747723_spm_1001.2014.3001.5501]: https://blog.csdn.net/weixin_65793170/article/details/129747723?spm=1001.2014.3001.5501
[Parcel1_icon-default.png_t_N2N8_https_www.parceljs.cn_getting_started.html]: https://www.parceljs.cn/getting_started.html
[Parcel2_icon-default.png_t_N2N8_https_v2.parceljs.cn_docs]: https://v2.parceljs.cn/docs/
[Three.js_icon-default.png_t_N2N8_https_threejs.org]: https://threejs.org/