前端框架合集 - Parcel

290 阅读1分钟

介绍

Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。

Parcel的相关网站

官网: Parcel (parceljs.org)

中文网: www.parceljs.cn/

Parcel的安装

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

如何创建Parcel的项目

文件目录

-- src
   --
   -- index.html
   -- index.js
-- package.json

index.html

<!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>测试项目</title>
</head>
<body>
    <div id="show-div" style="color: red;font-size: 18px;font-weight: bold;"></div>
    <script src="index.js"> </script>
</body>
</html>

index.js


document.getElementById('show-div').innerHTML = "Hello, world";

package.json

{
  "name": "jiajiang-client",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "parcel src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.9.3"
  }
}

使用命令:

npm start

启动项目

image.png

在浏览器访问:http://localhost:1234

image.png