Javascript

Parcelijs

本文主要是介绍Parcelijs，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Parcelijs

使用于纯静态处理Tailwind和JQ搭建简单的项目

tailwind配置

地址：https://www.tailwindcss.cn/docs/guides/parcel

npm init -y
npm install -D parcel
npm install -D tailwindcss postcss
npx tailwindcss init

创建一个.postcssrc文件

{
  "plugins": {
    "tailwindcss": {}
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./index.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>
<!--<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script>-->
<script type="module"  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="app.js" ></script>
<script>
    console.log(123123)
</script>
</body>
</html>

#package配置

快速初始化项目

{
  "name": "framework7",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "browserslist": "> 0.5%, last 2 versions, not dead",
  "scripts": {
    "start": "parcel",
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "parcel": "^2.10.3",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.3.6"
  },
  "dependencies": {
    "jquery": "^3.7.1"
  }
}
这篇关于Parcelijs的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航