纯前端打包工具Parcel

骑着蜗牛去放羊~

已于 2023-05-31 16:15:42 修改

阅读量514

点赞数 1

文章标签：前端

于 2021-03-29 17:03:25 首次发布

本文链接：https://blog.csdn.net/zyplll/article/details/115305656

版权

零配置构建Parcel

最近发现一个更快更好玩的打包工具，一通操作发现这个东东貌似用于小型的纯前端更加舒服
Parcel是一款0配置的打包工具,而且直接使用即可,打包速度快,提供了傻瓜式的使用体验,
在相同的项目中使用parcel速度会快很多,因为parcel内部使用的是多线程打包，

安装

yarn global add parcel-bundler

创建一个 package.json 文件，yarn init -y

示例的目录结构和代码

在这里插入图片描述

配置启动打包

package.json 简单配置

{
  "name": "parcelHtml",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html -p 8080",
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "cssnano": "^4.1.10",
    "sass": "^1.32.8"
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>parcelTest</title>
    <link rel="stylesheet" href="./src/css/index.scss">
</head>

<body>
    <p id="txt">hello world</p>

    <div id="btnBox"></div>

    <div class="testColor">
        测试一下
    </div>
    
    <script src="./src/js/index.js"></script>

</body>

</html>

index.js

// index.js
const setHtml = require("./setHtml").setHtml;
const setButton = require("./setButton").setButton;
const btnsTxt = ["测试", "开发", "按钮"];
document.getElementById("btnBox").innerHTML = setButton(btnsTxt);

const btns = document.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
  const color = "#7FFFAA";
  btns[i].onclick = function () {
    const Str = setHtml(this.textContent);
    document.getElementsByClassName("testColor")[0].innerHTML = Str;
    document.getElementsByClassName("testColor")[0].style.color = color;
    document.getElementById("txt").style.color = color;
  };
}

setHtml.js

function setHtml(params) {
  let Str;
  switch (params) {
    case "测试":
      Str = "修改后的测试";
      break;
    case "开发":
      Str = "修改后的开发";
      break;
    case "按钮":
      Str = "修改后的按钮";
      break;
    default:
      Str = "小小测试一下";
      break;
  }
  return Str;
}
module.exports = {
  setHtml: setHtml,
};

setButton

function setButton(arr) {
  let btnHtml = "";
  for (let i of arr) {
    btnHtml += `
			<button class="btn" type="button">${i}</button>
		`;
  }
  return btnHtml;
}
module.exports = {
  setButton: setButton,
};

启动

yarn start

骑着蜗牛去放羊~

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯前端打包工具Parcel

零配置构建Parcel最近发现一个更快更好玩的打包工具，一通操作发现这个东东貌似用于小型的纯前端更加舒服Parcel是一款0配置的打包工具,而且直接使用即可,打包速度快,提供了傻瓜式的使用体验,在相同的项目中使用parcel速度会快很多,因为parcel内部使用的是多线程打包，安装yarn global add parcel-bundler创建一个 package.json 文件，yarn init -y示例的目录结构和代码配置启动打包package.json 简单配置{ "na
复制链接

扫一扫