前端零配置打包工具 parceljs 体验

标签：src parcel index 前端 js parceljs html 打包

参考

https://www.parceljs.cn/getting_started.html parceljs中文官网
https://www.parceljs.cn/getting_started.html Parcel 1 版本的中文文档
https://v2.parceljs.cn/getting-started/webapp/ Parcel 2 版本的中文文档
https://www.bilibili.com/video/BV1Gg411X7FY?p=3 老陈打码

收获

parceljs 的也没什么配置，拿来就用，热更新实时刷新。

之前只是知道可以通过 node xxx.js 运行单个js文件，并且可以引入 npm 依赖，但是没有想到前端也可以纯 html 不使用任何如：vue、react 等框架就可以引入 npm 依赖并使用。

并且支持多文件打包，像非单页应用会有多个 html 文件，parceljs 也适用于这种场景下。

步骤

单文件项目（如项目只有一个index.html）

运行 npm init，所有选项都设置为默认即可。生成的 package.json 像下面这样：

{
  "name": "xiaqiuchu",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在项目目录中打开命令行，添加 parceljs 依赖。
```
yarn add --dev parcel
```
本次使用 threejs 测试 npm 是否能够引入与使用。
```
yarn add three
```
创建 src/index.html、src/app.js、src/style.css：

src/index.html

<!DOCTYPE html>
<html lang="zh">
<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="styles.css" />
	<script type="module" src="app.js"></script>
</head>
<body>

</body>
</html>

src/app.js

/**
 * three 是为了测试 npm 依赖是否能够正常引入使用，需要运行 yarn add three 命令进行安装 three 依赖
 */
import * as THREE from "three";
console.log(THREE);

src/style.css

*{
	margin: 0;
	padding: 0;
}
body{
	background-color: aquamarine;
}

修改package.json 像下面这样（删除了"main": "index.js",）：

{
  "name": "xiaqiuchu",
  "version": "1.0.0",
  "description": "",
  "scripts": {
	"start": "parcel src/index.html",
	"build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
	"parcel": "^2.7.0"
  },
  "dependencies": {
	"three": "^0.146.0"
  }
}

cmd 运行 yarn start 显示如下输出代表成功：
浏览器查看 http://localhost:1234 ，打印 THREE 变量成功，npm 包引入使用成功。

多文件项目（如项目多个 html 文件）

多文件有两种方式，第一种指定文件相对路径，第二种使用匹配符匹配（比较方便）

前提：在本文代码基础上新增 src/about.html，内容与 index.html 一致即可。

第一种(指定多个文件的明确名字与路径)

修改 package.json 如下即可

{
  "name": "xiaqiuchu",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "parcel src/index.html src/about.html",
    "build": "parcel build src/index.html src/about.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.7.0"
  },
  "dependencies": {
    "three": "^0.146.0"
  }
}

第二种(模糊匹配所有html文件)

修改 package.json 如下即可

{
  "name": "xiaqiuchu",
  "version": "1.0.0",
  "description": "",
  "scripts": {
		"start": "parcel ./src/**/*.html",
		"build": "parcel build ./src/**/*.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.7.0"
  },
  "dependencies": {
    "three": "^0.146.0"
  }
}

错误解决

运行 yarn build 可能会提示如下错误，解决办法删除 "main": "index.js",即可。

$ yarn build
yarn run v1.22.19
$ parcel build ./src/**/*.html

标签：src,parcel,index,前端,js,parceljs,html,打包	

From： https://www.cnblogs.com/xiaqiuchu/p/16871962.html