03-使用parcel搭建three.js開發(fā)環(huán)境-視頻教程

為了方便模塊化進(jìn)行three.js項目的學(xué)習(xí)和開發(fā)，又不用學(xué)習(xí)太多的配置，增加學(xué)習(xí)成本，所以就使用Parcel這個web應(yīng)用打包工具。

Parcel官網(wǎng)：https://v2.parceljs.cn/getting-started/webapp/

1、安裝

在開始之前，您需要安裝 Node 和 Yarn 或 npm，并為您的項目創(chuàng)建一個目錄。然后，使用 Yarn 將 Parcel 安裝到您的應(yīng)用程序中：

yarn add --dev parcel

或者在使用 npm 運行時：

npm install --save-dev parcel

2、項目設(shè)置

現(xiàn)在已經(jīng)安裝了 Parcel，讓我們?yōu)槲覀兊膽?yīng)用程序創(chuàng)建一些源文件。Parcel 接受任何類型的文件作為入口點，但 HTML 文件是一個很好的起點。Parcel 將從那里遵循您的所有依賴項來構(gòu)建您的應(yīng)用程序。

創(chuàng)建src文件夾，并且創(chuàng)建index.html文件

設(shè)置1個css文件

創(chuàng)建一個main.js

3、打包腳本

到目前為止，我們一直在parcel直接運行 CLI，但在您的package.json文件中創(chuàng)建一些腳本以簡化此操作會很有用。我們還將設(shè)置一個腳本來使用該命令構(gòu)建您的應(yīng)用程序以進(jìn)行生產(chǎn)。parcel build最后，您還可以使用該字段在一個地方聲明您的條目source，這樣您就不需要在每個parcel命令中重復(fù)它們。

package.json：

安裝依賴package.json設(shè)置的依賴

yarn install

現(xiàn)在您可以運行yarn build以構(gòu)建您的生產(chǎn)項目并yarn dev啟動開發(fā)服務(wù)器。

yarn dev