简介

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等

更多细节请移步官网