Реагировать на проект, используя пакетный пакет вместо Webpack

Question

Мы можем начать с проекта React, используя команду create-реагировать-приложение .Но когда мы используем эту команду, мы не понимаем, как она объединяет и упаковывает все типы файлов, используя Webpack.

Поэтому я попытался создать приложение реакции без create-реакции-приложения Команда с использованием Webpack 4 и Babel 7, и я добился успеха.

Теперь я хочу сделать то же самое приложение, используя упаковщик посылок.когда я читал в разных блогах, у меня возникла мысль, что посылка проще, чем веб-пакет, и она настроена на ноль.

Моя структура проекта

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

Это простой проект для запускас пакетом посылок, поэтому я еще не добавил Redux или маршрутизацию.

Я хочу достичь

1).Как и следовало ожидать, приложение React должно запускаться в браузере с использованием пакета посылок.

2).Я хочу использовать абсолютные пути при импорте файлов JS.

3).Я хочу включить горячую перезагрузку.

Answer 1

После нескольких минут исследований в сети я нахожу решение, и это действительно нулевая конфигурация с пакетом посылок.

нам просто нужно добавить 2 команды в секции скриптов файла package.json.

структура проекта

- 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-реакции-приложение, если нам просто нужен 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 для использования СКС. Посылка справится за вас.

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"]
   ]
}

здесь мы добавляем псевдоним для папки компонентов, поэтому, когда нам нужно импортировать любой файл из папки компонентов, нам не нужно указывать относительный путь.

npm run dev

ваш сервер запустится на локальном хосте: 1234

Я решил 2 проблемы, но все еще должен выяснить, как использовать горячую перезагрузку, поэтому, если у вас есть какие-либо идеи, связанные с горячей перезагрузкой, пожалуйста, ответьте на него.

для производственной сборки: npm run build