Настройка приложения Bare React на MacOs или Ubuntu 18.04

Необходим минимум

Mac OS или установка ОС Ubuntu, учетная запись Git, я использую редактор VIM для всех сценариев, я предполагаю, что вы уже настроили npm, я сохранил приведенный ниже код в любом коде, но в основном процесс настройки, чтобы он был максимально простым.

Шаги ниже

Шаг 1. Клонируйте проект TodoApp из git



sananand007 / ProjRct
В настоящее время вы не можете выполнить это действие. Вы вошли в систему с другой вкладкой или окном. Вы вышли из аккаунта на другой вкладке или… github.com



Это клонирование поможет вам пропустить шаги, указанные ниже.

  • вам не понадобится create-response-app, так как это увеличивает
  • вам не нужно будет делать npm init
  • вам не нужно будет создавать какие-либо json файлы, они будут предварительно настроены с минимальными настройками, которые я объясню

Шаг 2. Получите необходимые пакеты от npm

  • обновить до последней версии npm npm install -g npm
  • Запустите npm install в папке, это установит все зависимости, которые присутствуют в project.json, и вам не нужно будет ничего устанавливать
  • Запустите npm ls --depth=0, чтобы узнать, какие пакеты установлены в вашем проекте, это будет выглядеть примерно так, как показано ниже.
  • Тем не менее, сделайте это в конце, чтобы сделать webpack и webpack-dev-server глобально доступными на cmd
  • npm install -g webpack --save-dev
    npm install -g webpack-dev-server --save-dev
├── @babel/cli@7.7.0
├── @babel/core@7.7.0
├── @babel/preset-env@7.7.0
├── @babel/preset-flow@7.7.4
├── @babel/preset-react@7.7.0
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Step-3 Babel

  • Babel - это JS-компилятор, проверьте его, он понадобится вам для компиляции вашего JS-кода. Хорошо, что он уже настроен!


Babel · Компилятор для JavaScript следующего поколения
Узнайте больше о Babel из нашего руководства по началу работы или просмотрите несколько видеороликов о людях и концепциях, стоящих за ним… babeljs .io



  • Файлы .babelrc и webpack.config.js используются для настройки babel, просмотрите их и посмотрите, имеет ли это смысл, посмотрите раздел presets в babel, чтобы узнать о некоторых других удивительных пресетах, которые присутствуют и становятся глубже.

Шаг 4: реакция

  • Вы видите в списке пакетов, что необходимые компоненты React уже установлены для вас, поэтому здесь нечего делать

Шаг 5: общие сведения webpack.config.js

const path = require("path")
const webpack = require("webpack")
module.exports = {
    entry: "./src/index.js",
    mode: "developement",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                options: { presets: ["@babel/env"] }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
            }
        ]
    },
    resolve: { extensions: ["*", ".js", ".jsx"] },
    output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
    devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 4000,
    watchContentBase: true,
    progress: true,
    compress: true,
    publicPath: "http://localhost:4000/dist/",
    hotOnly: true
  },
    plugins: [new webpack.HotModuleReplacementPlugin()]
}
  • В entry указывается корень исходного кода проекта.
  • mode указывает тип среды для компиляции, сообщает, где должен быть размещен скомпилированный файл.
  • Раздел module определяет правила для типов файлов, которые будут обрабатываться, и что будет использоваться для их обработки, например js, jsx, css и т. Д.
  • devServer - это конфигурация выходных файлов и порта, на котором будет обслуживаться веб-страница, все это настраивается, пожалуйста, не стесняйтесь экспериментировать и настраивать их в соответствии с вашими потребностями.

Шаг 5 Package.json

{
  "name": "mainproj",
  "version": "1.0.0",
  "description": "LearnReact Beginner",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sananand007/ProjRct.git"
  },
  "author": "Sandeep Anand <[email protected]>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sananand007/ProjRct/issues"
  },
  "homepage": "https://github.com/sananand007/ProjRct#readme",
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.0",
    "@babel/preset-env": "^7.7.0",
    "@babel/preset-flow": "^7.7.4",
    "@babel/preset-react": "^7.7.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.0",
    "style-loader": "^1.1.2",
    "styled-jsx": "^3.2.4",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-popper": "^1.3.7"
  }
}
  • Это то, что вы найдете в самом репозитории git, никаких изменений не требуется.

Шаг 5. Выполните и проверьте

Просто запустите npm start в командной строке, и вы увидите, что веб-страница открывается как таковая. Это простое приложение # todolist, которое я настроил и которое будет обслуживаться по адресу http: localhost: 4000