3.7 KiB
title | localeTitle |
---|---|
Setting Up a React Es6 and Webpack Project | Настройка проекта Rex Es6 и Webpack |
Эта вики проинструктирует вас, как настроить проект bare-bones, который использует React, Webpack и ES6. Мы перейдем к тому, чтобы все было настроено по глубине.
Для этого проекта мы будем использовать Webpack, который является модульным модулем и обычно используется в проектах React.
React хорошо сочетается с ES6 , поэтому мы будем использовать ES6 в нашем коде.
ES6 является важным обновлением языка, и первое обновление для языка, поскольку ES5 был стандартизован в 2009 году.
- lukehoban
ES6 еще не работает в браузерах, но мы можем заставить его работать вручную, используя Babel, чтобы перевести его на ES5.
Ключевой особенностью технологий, которые мы используем, является то, что наш файл index.html
будет ссылаться на один связанный файл JavaScript, из которого мы можем ссылаться в других файлах JavaScript, а не ссылаться на них из файла HTML с тегами script
.
Предпосылки
Этот учебник предназначен для того, чтобы дать вам структуру с костью, на которой можно развернуть. Это должно быть хорошей отправной точкой для всех, кто хочет изучить React и ES6. Если вы еще ничего не создали с помощью JavaScript или jQuery, сначала выполните некоторые из упражнений на карте FreeCodeCamp .
Прежде чем начать, убедитесь, что у вас установлены NodeJS и Node Package Manager в самых последних версиях.
Быстрые инструкции
Ниже приведен список всех инструкций, упомянутых в этом уроке.
npm install webpack webpack-dev-server -g
mkdir react-webpack-example && cd $_
touch webpack.config.js
npm init
npm install --save-dev react react-dom webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .gitignore
- напишите
.gitignore
(используйте https://www.gitignore.io/api/node ) mkdir src
mkdir dist
mkdir src/js
touch src/js/client.js
touch dist/index.html
- написать
dist/index.html
- написать
src/js/client.js
- написать
webpack.config.js
webpack
webpack-dev-server --content-base dist
- Откройте сервер Webpack Dev Server в браузере. Готово!