Как вручную настроить минимальную настройку для React без create-реагировать на приложение? - PullRequest
Новая
       43

Как вручную настроить минимальную настройку для React без create-реагировать на приложение?

1 голос
/ 14 марта 2019

Я не хочу использовать create-react-app. Так как же настроить минимальную рабочую среду разработчика для простого приложения реакции?

Примечание: Я знаю, что я мог бы просто включить все во время выполнения как JS (это хорошо задокументировано), но я не хочу этого, так как я все еще хочу версию, которая для производства !

Я не хочу:

  • для минимизации ( см. Связанный вопрос здесь )
  • иметь любую конкатенацию (или, если это проще сделать, я могу иметь все JS, например, конкатенированные в файле)
  • любая более старая поддержка браузера, чем то, что я пишу как JS (так что никакой транспиляции, которая делает это)
  • любой dev-сервер (я могу перезагрузить его вручную. ?)
  • любые функции live-reload или расширенные функции разработки

Я хочу:

  • для использования компонентов React
  • (опционально) включает JSX ( Я знаю, что можно использовать React без него , но допустим, что это минимальное преимущество, которое я хочу получить от React. для настройки / конфигурации это будет «стоить» включить, поэтому этот ответ применим для тех, кто хочет JSX, и тех, кто этого не делает.)

В основном, Я просто хочу использовать React . Без всего этого придуманного другого! *

Я просто спрашиваю об этом, потому что официальные документы React не упоминают эту возможность.

Внимание: рассуждение для тех, кто задается вопросом, почему я этого хотел.

* На самом деле, это звучит безумно, игнорировать эти удобные функции разработчиков и т. Д. Но я утверждаю, что для этого есть законные причины / варианты использования. Например, мой что все это просто бесполезно для меня / ломает вещи, так как Я пытаюсь создать расширение для браузера с React .

Да Я видел этот очень похожий вопрос , но, к сожалению, пользователь на шаг впереди меня, и ответы на него весьма специфичны для их проблемы. Сначала я хочу узнать общие вещи, то есть что мне нужно и как настроить ?

1 Ответ

1 голос
/ 14 марта 2019

Необходимые условия:

  • Node.js (npm) установлен на вашем компьютере

Так что для довольно минимальной настройки вы хотите ...

  1. Инициализация папки

    • cd path/to/my/folder
    • npm init

  2. Создайте index.html 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <script src="./dist/main.js"></script>
    </body>
</html>

Тогда вы захотите npm install --save-dev ...

  • реагировать
  • реагировать на дом
  • веб-пакет
  • webpack-cli
  • @ babel / core
  • babel-loader
  • @ babel / preset-response

Создать.babelrc

{
  "presets": ["@babel/preset-react"]
}
Создать webpack.config.js 
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
Редактирование package.json скриптов для сборки 
"scripts": {
    "build": "webpack --mode development"
  },
Напишите свой корневой компонент

Создайте папку src/components и затем создайте src/components/app.jsx: 

import * as React from "react";

export class App extends React.Component {

  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}
Напишите ваш рендерер ReactDOM в src/index.js (обратите внимание .js, а не jsx - веб-пакет не найдет файл в противном случае, без дополнительных настроек): 
import ReactDOM from "react-dom";
import { App } from "./components/app.jsx";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
Сборка: npm run build Откройте свой path/to/my/folder/index.html в современном браузере

И все готово!Теперь вы можете добавлять любые удобные дополнения по вашему желанию без каких-либо нежелательных наворотов.Я рекомендую TypeScript .

Для тех, кто читает, которым требуется поддержка старых браузеров , просто выполните следующие два шага:

  1. npm install @babel/preset-env
  2. Редактировать .babelrcи добавьте @ babel / preset-env к своим пресетам: 
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
...