使用parcel bundler而不是Webpack來反應項目

Question

我們可以使用命令create-react-app從React項目開始。 但是當我們使用這個命令時，我們不知道它是如何使用Webpack捆綁和打包所有類型的文件。

所以我嘗試使用Webpack 4和Babel 7在沒有create-react-app命令的情況下構建react應用程序並且我成功了。

現在我想使用parcel bundler做同樣的應用程序。 正如我在不同的博客上看到的那樣，我知道包裹很容易然后是網絡包，它真的是零配置設置。

我的項目結構是

- src
|- components
|- styles
|- index.html
|- index.js
- package.json

這是一個簡單的項目，從包裹捆綁開始，所以我還沒有添加Redux或路由。

我想要實現的是

1）。 因為應該使用parcel bundler在瀏覽器中運行所謂的React應用程序。

2）。 我想在導入JS文件時使用絕對路徑。

3）。 我想啟用熱重裝。

Answer 1

經過幾分鍾的網絡研究后，我找到了解決方案，並且使用包裹捆綁器實現零配置。

我們只需要在package.json文件的腳本部分添加2個命令。

項目結構是

- src
|- components
|- styles
|- index.html
|- index.js
|- App.js
- package.json
- .babelrc // this file will use to setup absolute path when import files

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import "./style/index.scss";

ReactDOM.render(<App />, root);

index.html與create-react-app提供的文件相同，我們只需要id為div。

App.js

import React, { Component } from "react";
import Count from "@components/Count"; // here I used absolute path. check .bablerc file
export default class App extends Component {
    render() {
       return (
         <>
          <div>this is App component</div>
          <Count />
        </>
      );
 }
} 

組件/ Count.js

import React, { Component } from "react";

export default class Test extends Component {
  constructor(props) {
   super(props);
   this.state = {
   count: 0
   };
  }

  render() {
    return (
      <>
       count is: {this.state.count}
      <br />
       <button onClick={(prevState) => {this.setState({
         count: prevState.count + 1
        });
      }}
    >
      Add count
      </button>
  </>
);
}
}

風格/ index.scss

body {
  background-color: red;
  color: #fff;
  text-align: center;
  font-size: 40px;
}

請注意，我們不需要手動安裝node-sass包來使用scss。 包裹將為您處理。

的package.json

{
  "name": "react_parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {   
    "parcel-bundler": "^1.12.3",
  },
  "dependencies": {
  "react": "^16.8.6",
  "react-dom": "^16.8.6"
  }
}

.bablerc

{
  "plugins": [
    [
      "module-resolver",
     {
       "root": ["./src"],
       "alias": {
         "@components": "./src/components"
       }
     }
    ],
   ["react-hot-loader/babel"]
   ]
}

這里我們為components文件夾添加別名，所以當我們需要從components文件夾導入任何文件時，我們不需要編寫相對路徑。

npm run dev

您的服務器將在localhost：1234上啟動

我解決了2個問題，但仍然需要弄清楚如何使用熱重裝，所以如果你們有任何想法相關的熱重裝請回答。

用於生產構建： npm run build