手动搭建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

 

目录
相关文章
|
12月前
|
存储 JavaScript 前端开发
架构-单一代码库-monorepo-pnpm-workspace:基本使用
架构-单一代码库-monorepo-pnpm-workspace:基本使用
503 0
|
2月前
|
数据采集 API C#
网页解析高手:C#和HtmlAgilityPack教你下载视频
使用C#和HtmlAgilityPack解析小红书网页,下载其视频内容。文章涵盖了解析网页、获取视频链接、C#实现、HtmlAgilityPack简化解析、代理IP确保下载稳定及多线程提高下载效率。提供的代码示例展示了如何设置代理和多线程下载视频。实验结果显示,该方法能有效、高效地下载小红书视频。
网页解析高手:C#和HtmlAgilityPack教你下载视频
|
2月前
|
IDE 开发工具 Python
发布Package到PyPI
发布Package到PyPI
21 0
|
前端开发 JavaScript 开发工具
如何使用lerna进行多包(package)管理
如何使用lerna进行多包(package)管理
378 0
如何使用lerna进行多包(package)管理
学习笔记jira项目45-初步实现useUrlQueryParams
学习笔记jira项目45-初步实现useUrlQueryParams
62 0
学习笔记jira项目45-初步实现useUrlQueryParams
jira项目笔记20-useSearchParams
jira项目笔记20-useSearchParams
168 0
九十五、Spark-SparkSQL(打包集群运行最终版)
九十五、Spark-SparkSQL(打包集群运行最终版)
九十五、Spark-SparkSQL(打包集群运行最终版)
|
前端开发 JavaScript Shell
parcel-bundler安装 - 前端构建工具
parcel-bundler安装 - 前端构建工具
587 0
X-Pack Spark用户手册
概述 Spark是大数据平台的通用计算平台,应用非常广泛。本文主要介绍Spark相关的知识,主要包括:了解Spark,使用Spark,使用Spark过程中遇到的问题FAQ等,谨帮助用户快速的掌握Spark以及如何使用Spark。
3265 0
|
Shell Linux KVM
Packer创建阿里云本地镜像
Packer创建阿里云本地镜像 通过手工创建在本地镜像,并且上传到云环境是一个复杂而易错的过程,而packer的出现极大的降低了这种复杂度,本文详细了讲解了如何在ubuntu(16.04或者更高版本)系统基于packer创建centos 6.8的镜像并上传到阿里云自定义镜像的全过程。
11668 0