background

I never look beyond the code because I trust someone to do it for me…

It felt OK to use the Parcel before

Start operation

  • Install the Parcel
yarn global add parcel-bundler
Copy the code
  • Create package.json and add a command along the way
yarn init -y
// package.json
"scripts": {
  "start": "parcel index.html"
}
Copy the code
  • Install Babel
yarn add babel-preset-env
Copy the code
  • Installation node – sass
yarn add node-sass
Copy the code
  • And then we create.babelrc
{
  "preset": ["env"]}Copy the code
  • Install React dependencies
yarn add react
yarn add react-dom
yarn add --dev parcel-bundler
yarn add --dev babel-preset-env
yarn add --dev babel-preset-react
Copy the code
  • Modify it in.babelrc
{
  "presets": ["env"."react"]}Copy the code

Reorganize the catalog… It should be right now (critical)

node_modules
src
    components
    containers
    App.js
    App.scss
.babelrc
index.html
package.json
Copy the code

index.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>
Copy the code

index.js

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

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

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;
Copy the code

App.scss

$color-red: red; $color-black: black; h1{ color: $color-red; cursor: pointer; &:hover{ color: $color-black; }}Copy the code

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"}}Copy the code

Finally, NPM run

Comfortable, and finally can not use the scaffolding, their own hands

What other dependencies do you have to do with yarn add or NPM install