简介
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等
更多细节请移步官网
发表回复