手动搭建Parcel项目

简介: 手动搭建Parcel项目

一、初始化项目目录

新建一个文件,使用vscode打开文件夹

npm init

点击回车,使用默认配置就可以


二、安装parcel依赖

npm install parcel-bundler --save-dev

三、新建入口文件

1、新建src目录,index.html文件

新建asset、css、main、images、style.css、main.js文件夹及文件,index.html引入style.css、main.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./asset/css/style.css">
</head>
<body>
    <script src="./main/main.js" type="moudle"></script>
    
</body>
</html>

2、修改package.json脚本;

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


3、启动项目

npm run dev

 

相关文章
three.js的Gui面板使用方法
three.js的Gui面板使用方法
727 0
|
安全 Java Linux
一文了解 Maven 的 settings.xml 配置文件
一文了解 Maven 的 settings.xml 配置文件
2695 0
|
存储
【数据结构】连通图、连通分量与强连通图、强连通分量—区别在于强,强强在哪里?
【数据结构】连通图、连通分量与强连通图、强连通分量—区别在于强,强强在哪里?
8873 1
【数据结构】连通图、连通分量与强连通图、强连通分量—区别在于强,强强在哪里?
|
小程序 前端开发 API
【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
threeJs用精灵模型Sprite实现下雨效果
这篇文章介绍了使用Three.js中的Sprite(精灵)模型来实现下雨特效的方法和技术细节。
510 2
threeJs用精灵模型Sprite实现下雨效果
|
移动开发 前端开发 JavaScript
HTML+CSS动画打造酷炫轮播图!(含源码)
HTML+CSS动画打造酷炫轮播图!(含源码)
|
JavaScript 前端开发 中间件
异步编程中使用 async/await 是否必须包含 try 和 catch 语句以实现错误处理?
异步编程中使用 async/await 是否必须包含 try 和 catch 语句以实现错误处理?
|
Ubuntu Linux Shell
Docker CE 镜像源站
Docker CE 镜像源站
234154 117
网络技术基础(19)——PPPoE实验
【3月更文挑战第5天】该文介绍了PPPoE拨号上网的模拟实验。通过运营商提供的PPPoverEthernet服务,设备可以动态获取内网地址并连接到Internet。实验包括服务器和客户端的配置:服务器设置地址池、认证账号和虚拟模板,并绑定到物理接口;客户端配置拨号规则、虚拟拨号口及内网网关,以实现永久在线连接。实验结果显示,客户端成功通过Dialer接口连接到服务器,实现了上网功能。
|
前端开发 JavaScript UED
前端 js 经典:async 和 await
前端 js 经典:async 和 await
429 2