Parcel上手与React简单开发环境搭建

最新推荐文章于 2021-11-05 15:32:58 发布

weixin_33868027

最新推荐文章于 2021-11-05 15:32:58 发布

阅读量179

点赞数

文章标签： javascript json ViewUI

原文链接：https://juejin.im/post/5ac71bd16fb9a028be363aa0

版权

背景

我从不关注代码之外的东西，因为我相信有人会帮我做这些...

之前上手了Parcel感觉还OK，在这里小小的整理一哈

开始操作

安装Parcel

yarn global add parcel-bundler
复制代码

创建package.json再顺便加个命令

yarn init -y
// package.json
"scripts": {
  "start": "parcel index.html"
}
复制代码

安装Babel

yarn add babel-preset-env
复制代码

安装node-sass

yarn add node-sass
复制代码

接着创建.babelrc

{
  "preset": ["env"]
}
复制代码

安装React依赖

yarn add react
yarn add react-dom
yarn add --dev parcel-bundler
yarn add --dev babel-preset-env
yarn add --dev babel-preset-react
复制代码

在.babelrc中修改

{
  "presets": ["env", "react"]
}
复制代码

再整理一下目录...现在应该是这样的(关键的)

node_modules
src
    components
    containers
    App.js
    App.scss
.babelrc
index.html
package.json
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parcel-React</title>
</head>
<body>
  <div id="root"></div>
  <script src="./src/index.js"></script>
</body>
</html>
复制代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
复制代码

App.js

import React, { Component } from 'react';

import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello Parcel-React</h1>
      </div>
    );
  }
}

export default App;
复制代码

App.scss

$color-red: red;
$color-black: black;
h1{
  color: $color-red;
  cursor: pointer;
  &:hover{
    color: $color-black;
  }
}
复制代码

package.json

{
  "name": "parcel-test1",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html"
  },
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "node-sass": "^4.8.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.6.2"
  }
}
复制代码