Я изучал веб-пакет несколько дней назад и, наконец, получил немного больше, чем раньше, поэтому вчера я выпустил вводную заметку по веб-пакету, и сегодня я продолжаю использовать веб-пакет, чтобы практиковать свои навыки и создавать среду разработки React. Если вы еще не знакомы с Детской обувью, можете взглянуть на опубликованные вчера заметки:Начало работы с заметками веб-пакета
1. Инициализируйте папку проекта
В любом каталоге создайте новую папку в качестве папки вашего проекта, назовите ее как хотите. Затем с помощью инструмента командной строки перейдите в папку и введитеnpm initИнициализируйте (просто нажмите Enter, если у вас возникнут проблемы), после завершения инициализации вы увидите, чтоpackage.jsonдокумент.
Затем создайте две новые папки в папке проекта:/distа также/src,в/srcИспользуется для размещения исходного кода для разработки,/distИспользуется для размещения "скомпилированного" кода.
затем в/srcновый каталогindex.html,index.cssа такжеindex.jsдокумент
2. Установите инструмент веб-пакета
Использование webpack 4 из командной строки требует установки двух модулей: webpack и webpack-cli, которые устанавливаются как зависимости от среды разработки.
npm install -D webpack webpack-cli
После завершения установки вы можете увидеть свойpackage.jsonФайл изменился, и в атрибуте devDependencies есть еще два атрибута пакета.
В-третьих, настройте самый простой веб-пакет
-
1. Установите самые основные плагины:
npm install -D html-webpack-plugin clean-webpack-plugin webpack-dev-server css-loader webpack-merge style-loader -
2. Создайте новый файл в папке проекта
webpack.base.conf.js, указывающий на самый простой конфигурационный файл, содержание которого следующее:const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.[hash].js', path: path.join(__dirname, '/dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new CleanWebpackPlugin(['dist']) ] };в,
/src/index.htmlHTML-файл входа на ваш сайт,/src/index.jsваш входной файл js. -
3. Создайте новый проект в папке проекта.
webpack.dev.conf.jsфайл, представляющий конфигурацию в среде разработки. Содержание следующее:const merge = require('webpack-merge'); const baseConfig = require('./webpack.base.conf.js'); module.exports = merge(baseConfig, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', port: 3000 } }); -
4. Создайте новый проект в папке проекта.
webpack.prod.conf.jsфайл, указывающий конфигурацию производственной среды, содержание следующее:const merge = require('webpack-merge'); const baseConfig = require('./webpack.base.conf.js'); console.log(__dirname); module.exports = merge(baseConfig, { mode: 'production' });
В-четвертых, настройте сценарии npm.
Три файла конфигурации настроены для соответствия построению кода в двух разных средах с использованием лучшей семантики.npm scriptsструктурировать код для упрощения работы.
Добавьте новое содержимое скриптов вpackage.jsonдокументscriptsАтрибуты, не забудьте заключить их в двойные кавычки, и их атрибуты следующие:
// package.json
{
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.conf.js",
"build": "webpack --config webpack.prod.conf.js"
}
}
После настройки можно попробовать изменить/src/index.html,/src/index.jsили/src/index.css, запустите команду npm scripts, чтобы увидеть эффект.
Например, создайте файл со следующим содержимым:
index.html
<html>
<head>
<meta charset="utf-8"/>
<title>React & Webpack</title>
</head>
<body>
<div id="root">
<h1>Hello React & Webpack!</h1>
</div>
</body>
</html>
index.css
body {
background-color: blue;
}
#root {
color: white;
background-color: black;
}
index.js
import './index.css';
console.log('Success!');
Затем используйте командуnpm run start, вы можете увидеть эффект. Измените файл css или js, и после его сохранения вы увидите, как браузер автоматически обновляется и отображает только что внесенные вами изменения.
На данный момент базовая среда разработки создана, и следующим шагом является настройка различных веб-пакетов для сборки среды, специфичной для React.
Использование React для разработки, в основном ES6 (хотя в последнее время все продвинутые браузеры поддерживают ES6, но все же нужно подготовиться к низкоуровневому IE), и синтаксис React JSX необходимо преобразовать. Конфигурация для этих двух синтаксисов следующая.
Пять, настроить Babel
Babel — отличный компилятор JavaScript (эта фраза взята изофициальный сайт Бабеля), с помощью некоторых плагинов Babel синтаксис JSX и синтаксис ES6 можно преобразовать в синтаксис ES5, чтобы низкоуровневые браузеры также могли запускать написанный нами код.
(1) Установите пресеты Babel
Установите пресеты Babel с помощью следующей команды:babel-loader,babel-polyfillа такжеbabel-preset-react:
npm install -D babel-preset-env babel-loader babel-polyfill babel-preset-react
(2) Настройте .babelrc
Создайте новый в корне папки проекта.babelrcфайл (он не может быть создан непосредственно под Windows, вы можете создать его, назвав файл как.babelrc.для достижения цели создания), введите в файл следующее содержимое:
{
"presets": ["env", "react"]
}
(3) Конфигурацияwebpack.base.conf.js
существуетmodule.rulesВставьте новый объект в , со следующим содержимым:
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
(4) Установкаreactа такжеreact-domмодуль
npm install --save react react-dom
(5) Начать разработку
существует/srcсоздать новыйApp.jsфайл со следующим содержимым:
import React from 'react';
class App extends React.Component {
render() {
return <div>
<h1>Hello React & Webpack!</h1>
<ul>
{
['a', 'b', 'c'].map(name => <li>{`I'm ${name}!`}</li> )
}
</ul>
</div>
}
}
export default App;
пустойindex.jsЗатем напишите в нем следующее:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App/>, document.getElementById('root'));
использоватьnpm run startКоманда для открытия страницы, чтобы увидеть эффект, написанный с использованием React.
Откройте браузер, чтобы просмотреть скомпилированный код, найдите раздел функции карты в компоненте приложения, и вы увидите, что синтаксис ES6 был преобразован в синтаксис ES5:
['a', 'b', 'c'].map(function (name) {
return _react2.default.createElement(
'li',
null,
'I\'m ' + name + '!'
);
})
Стрелочные функции записываются как анонимные функции.
6. Описание
Я повторил описанные выше шаги, и я могу успешно построить его, следуя ему шаг за шагом.Заинтересованная детская обувь может следовать ему. ^_^
Кроме того, если есть какие-либо ошибки, пожалуйста, напомните мне, я немедленно исправлю!