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