简介
webpack的复杂度连他的创始人都记不全有多少选项，开发者要开发一个项目配置要搞半天，
parcel就相当于一款0配置的webpack，它可以根据代码自动下载依赖并进行配置
github
https://github.com/parcel-bun...
觉得不错请star支持下作者
安装
全局
- Yarn:
yarn global add parcel-bundler
- npm:
npm install -g parcel-bundler
项目里
在你正在使用的项目目录下创建一个 package.json 文件：
yarn init -y
或者
npm init -y
然后局部安装
使用
创建一个html文件, 例如index.html
开发
parcel index.html
编译（默认dist文件夹）
parcel build index.html
或者项目内配置package命令
{
"scripts": {
"dev": "parcel <your entry file>",
"build": "parcel build <your entry file>"
}
}
yarn dev
开发React
- 编写一个index.html入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="./index.js"></script>
</html>
- 运行开发
parcel index.html
- 编写index.js文件，直接写react入口代码
import React from "react";
import ReactDOM from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Test {this.props.name}</div>;
}
}
var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="https://zpfei.ink" />, mountNode);
所有的依赖包和配置都会自动完成
babel
根目录下直编写.babelrc文件
{
"presets": ["@babel/preset-react"]
}
这里的依赖包和配置都会自动完成
开发vue
- 编写一个index.html入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="./index.js"></script>
</html>
- 运行开发
parcel index.html
- 编写index.js文件，直接写Vue入口代码
index.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
el: "#app",
render: (h) => h(App),
});
App.vue
<template>
<div>{{ name }} {{ date }}</div>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
name: "https://zpfei.ink",
};
},
computed: {
date() {
return moment().format("HH:mm:ss");
},
},
};
</script>
所有的依赖包和配置都会自动完成
parcel还可以做到更多，自动less,scss,TypeScript等
更多细节请移步官网
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。