关于react.js:前端快速开发神器parcel

42次阅读

共计 1795 个字符,预计需要花费 5 分钟才能阅读完成。

简介

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

更多细节请移步官网

正文完
 0