15 分钟快速上手 Parcel 中使用 React


最近准备新开一个 Threejs 学习的坑,因为重点在 Threejs 上,所以想构建一个简易方便的环境。于是我自然而然的想到了最近火热的 parcel 来替代以往的 webpack. 在我自己尝试了之后,这简直比我想象中的还要简单方便——当然是指搭建一个基本环境啦。
推荐:★★☆

索引

技术栈

  • parcel 支持 node v8.0.0 +. 所以我们使用 node v8.0.0
  • 当然也少不了框架 react. 所以使用 react 16.0.0+.
  • npm 使用有些显老了,不如试试 yarn.
  • 至于 parcel, 当然也是与时俱进用最新的了。
  • 所以最终确认下技术栈和版本。

1
2
3
4
node v8.0.0
react v16.2.0
yarn v1.3.2
parcel v1.4.1

安装依赖

  • mkdir [your project] —— 在一个合适的目录下新建个项目。
  • yarn init 初始化新项目,一顿回车后即完成。
    • PS: 如果 node 版本不够的话,先升级 node, nvm install v8.0.0 nvm use v8.0.0.
    • 然后升级 yarn. 卸载后重装。npm uninstall -g yarn.npm install -g yarn.
  • 接下来是安装一些 react 依赖。
    • yarn add react@16.2.0
    • yarn add react-dom@16.2.0
    • yarn add prop-types
  • 当然也少不了 babel 来编译 es6, es7 等。
    • yarn add babel-preset-env 用于 es6.
    • yarn add babel-preset-react 用于 react.
    • yarn add babel-preset-stage-0 用于 es7.
  • 接着就是重头啦。
    • yarn add parcel-bundler@1.4.1
  • 这顿操作之后,依赖已经加载完毕。

快速上手

  • 配置 .babelrc 文件来使用 babel。

1
2
3
{
"presets": ["env", "react", "stage-0"]
}

  • 配置首页入口。

1
2
3
4
5
6
7
8
<!DOCTYPE>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>

  • 配置 js 文件。使用 react.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

class Hello extends Component {
static propTypes = {
name: PropTypes.string
}

render() {
return <div> hello { this.props.name }</div>
}
}

const app = document.querySelector('#app')
ReactDOM.render(<Hello name='world'/>, app)

  • 这样就已经接近完成。
  • 剩下的,只要在 package 中加上 scripts.

1
2
3
"scripts": {
"start": "parcel index.html"
}

  • 最终只要在项目下运行 npm start,再打开 open http://localhost:1234. 几乎是一眨眼的功夫,就可以看到 hello world 了。
  • 是不是非常快捷而简单呢。

项目地址: threejs-learning

附上官网链接: Parcel

面试题整理-2018 初识 Threejs(下) —— 实现一个太阳系模型

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×