在这里插入图片描述

Parcel简介
Parcel是一款0配置的打包工具,而且直接使用即可,打包速度快,提供了傻瓜式的使用体验,

在相同的项目中使用parcel速度会快很多,因为parcel内部使用的是多线程打包，

充分发挥多核CPU的特性,webpack也有这样的功能需要插件实现,

而且我们只需要了解几个命令就可以构建前端应用程序了
parcel快速上手
事先准备

项目初始化:yarn  init -y

parcel安装:yarn  add parcel-bundler --D 

一般以html作为项目的入口文件
HTML入口文件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
</body>
</html>
ESModule模块导出
//ESModule.js 文件

let add = {
    name: "11"
}
let age = 20

export { add, age }
commonjs导出
module.exports = {
    name: "Loki",
    age: 20
}
style文件
body {
    background-color: aquamarine;
}
JavaScript主文件
//main.js

import { add, age } from './add';

import _ from 'lodash';

import "./style.css"

const common = require('./common');

console.log(common); //打印commonjs导出的模块

console.log(add, age); //打印ESModule导出的模块

let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(_.last(num)); //使用lodash

if (module.hot) { //判断是否支持热加载

    console.log('module hot');

    module.hot.accept(() => {
        console.log('add');
    })
}
开发建议
在package里面的scripts定义任务，这样运行任务很简单
    "scripts": {
        "serve": "yarn parcel ./src/index.html",//开发任务
        "build": "yarn parcel build ./src/index.html"//生产任务
    },
总结
parcel用着很简单,总的来说Do what you want to do/想要做什么，只管去做其他的交给parcel来处理
# javascript # 前端 # es6 # typescript
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

PHP与人工智能：结合案例与可能性探索

avatar 讯飞AI开发者社区

通用人工智能(AGI)发展现状：从科幻到现实的跨越

通用人工智能(AGI)正从科幻走向现实。2025年，多模态融合、递归推理引擎和能效革命三大技术突破推动AGI发展，国际科技巨头和中国企业加速布局。AI Agent在金融、医疗、教育等领域广泛应用，企业自动化效率显著提升。然而，数据隐私、算法透明度和就业替代等伦理挑战亟待解决。未来，AGI将向多模态量子计算融合、具身智能和世界模型方向发展，需要建立人机协作新模式和完善的政策法规框架。AGI既带来机遇

avatar 讯飞AI开发者社区

C++与人工智能框架

重新排列范围，使得指定位置的元素等于排序后的元素，并且左边的元素都不大于它，右边的元素都不小于它。算法的原理是 “覆盖” 要删除的元素，将保留的元素移到前面，返回新的逻辑尾迭代器，但。对范围内的每个元素应用一个函数，并将结果存储在另一个范围内。移除范围内连续的重复元素，返回新的逻辑结尾迭代器。旋转范围内的元素，使中间元素成为新的第一个元素。这些算法不会改变它们所操作的容器中的元素。这些算法会修改它

avatar 讯飞AI开发者社区