Настройка среды js js с учетом WebPack

Автор оригинала: Ganpat kakar.

React JS обеспечивает установленную настройку окружающей среды CLI, Create-React-App Отказ И настроек с приложением Create-raction – очень просто и легко начать. Q. Так почему же нам нужно знать о настройке React JS Среда с WebPack и Babel? A. Потому что в основном в капоте большинство вещей настроится с Babel и WebPack, единственную часть – насколько вы можете пойти глубже и познакомиться с основы настроек окружающей среды CLI. Чтобы узнать основы работы, которую вы делаете, поможет вам смешивать вещи в соответствии с вами. Так что давайте начнем. Создайте папку с именем rage_setup и откройте эту папку в вашем терминале. Мы будем настроить WebPack и WebPack-CLI в качестве зависимостей разработчиков: –

npm install webpack webpack-cli -D

Он принесет все модули узлов, связанных с WebPack и WebPack-CLI в папке узла-модуля. Теперь мы принесем наши зависимости разработчиков Babel для узлов-модулей: –

npm install babel-core babel-loader babel-preset-env babel-preset-react -D

Есть еще несколько зависимостей Babel и WebPack, которые мы принесем позже в этом процессе установки. Теперь его время для реагирования и реагирования на наш проект в качестве зависимостей. Итак, обратно в терминал и команда записи: – NPM Install Rect React-DOM – Сохранить – Сохранить, будет реагировать на настройку как зависимости в нашем Package.json Итак, давайте посмотрим на наш текущий Package.json

{
 "name": "react_setup",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "⁶.26.3",
 "babel-loader": "⁷.1.4",
 "babel-preset-env": "¹.7.0",
 "babel-preset-react": "⁶.24.1",
 "webpack": "⁴.12.1",
 "webpack-cli": "³.0.8"
 },
 "dependencies": {
 "react": "¹⁶.4.1",
 "react-dom": "¹⁶.4.1"
 }
}

Так что теперь мы получили все Devdependonds и зависимости в нашем Package.json, и все зависимости загружаются в модуль узла. Если вы не хотите выполнить верхнюю настройку, вы можете скопировать этот пакет. JSON в вашей папке проекта, а команда запуска Установка NPM установит основы проекта. Теперь перейдите к конфигурации WebPack для нашего проекта. Так что создайте файл WebPack.config.js из вашего любимого текстового редактора или от терминала с помощью командного сенсорного webpack.config.js (для Mac) Откройте Webpack.config.js в вашем текстовом редакторе и начните настройку конфигурации: –

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: path.resolve(__dirname, 'src') + '/index.js',
 output: {
 path: path.resolve(__dirname, 'public'),
 filename: 'bundle.js',
 publicPath: '/public/'
 },
 module: {
 rules : [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: "babel-loader"
 }
 }
 ]
 },
 watch: true
};

Согласно нашему конфигурации WebPack, наш путь ввода проекта является index.js, который лежит в папке с именем «SRC», и наш выходной путь будет папкой, названной «общедоступной», и наше имя выходного файла is bundle.js, и мы также определяем ProductPath как общая папка. Теперь, чтобы настроить правила нашего создания пакета, мы определим модуль и правила в качестве массива объектов, которые будут использовать Babel-loader для преобразования нашего ES6 (скрипт ECMA 2015 или более поздней версии) на ES5, из-за большинства браузеров только понимают только ES5 и Мы также хотим, чтобы наш проект был обратно совместимым с более старыми браузерами. Теперь пришло время настроить предустановки Babel: – Так что создайте файл с именем .babelrc и вставьте код: –

{
 "presets": ["env", "react"]
}

Теперь мы все сделаем с настройкой среды, время начать с нашей главной целью написания React: – так создайте папку с именем «SRC» (MKDIR SRC) и создать файл index.js (важно – потому что мы сказали в WebPack Начните наш пучок только от index.js). Так что наш index.js будет выглядеть так. Импорт реагирует с «реагирования»; Импорт реагировал от «реагирования»; Reactom.runder (

Пришло время проверить все работает правильно: – поэтому нам нужно начать WebPack, но мы не настроили на настройку и строю или запускаем команду package.json, поэтому перейдите к package.json и находить скрипты и вставлять ниже в скриптах; –

"build": "webpack -p"

Это создаст производство Ready WebPack Bundle.js файл, так что нажмите команду как

npm run build

Теперь проверьте свою общедоступную папку, вы найдете Bundle.js, который создает WebPack. Теперь вы можете запустить свой index.html, дважды щелкнув свой файл в папке rage_setup/public: –

Выход проекта

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