使用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