Надеюсь, ваш поиск на этом заканчивается, если вы пытаетесь настроить проект React с помощью Typescript и webpack. Мы не будем обсуждать реакцию как таковую, но в конце вы сможете запустить собственное приложение для реагирования на машинописном тексте с помощью webpack.
Поскольку это в основном нацелено на разработчиков, относительно плохо знакомых с «новым» способом веб-разработки, мы подробно рассмотрим каждый шаг.
Предварительные требования
Узел установлен.
Node - это среда выполнения javascript, построенная на движке JavaScript V8 Chrome. Чтобы узнать больше, перейдите здесь. Это помогает нам запускать javascript вне экосистемы браузера. Мы также можем воспользоваться бесконечным списком библиотек с открытым исходным кодом, используя диспетчер пакетов npm. Однако мы будем использовать Yarn вместо node. Если вы не установили Yarn, установите Yarn глобально с помощью npm. Пряжа - быстрая, надежная и безопасная альтернатива npm. Его способность работать в автономном режиме и последовательно в разных системах, безусловно, является преимуществом по сравнению с npm.
$ npm install -g yarn
Создание проекта
$ yarn init
Это проведет вас через интерактивный сеанс, в конце которого у вас будет создан файл package.json. Здесь собираются метаданные вашего проекта, включая зависимости и другие события жизненного цикла на различных этапах проекта. Подробнее об этом позже.
Установка зависимостей для разработки.
Теперь мы установим webpack и TypeScript в качестве зависимостей разработки.
$ yarn add webpack --dev $ yarn add typescript --dev
Это потому, что мы будем использовать TypeScript и webpack только на этапе разработки. После завершения разработки мы будем использовать связанный код (для объединения мы будем использовать веб-пакет) с TypeScript, перенесенным в es5, который поддерживается во всех браузерах.
что такое веб-пакет и почему мы его используем
При использовании машинописного текста вы получаете преимущества расширенных функций es2015 и специфических особенностей машинописного текста. Но браузеры еще не достаточно зрелы, чтобы понимать эти новые конструкции. Именно здесь на помощь приходит веб-пакет.
Так как же Webpack помогает решить указанную выше проблему? Это стоит знать! Короче говоря, webpack - это сборщик модулей для javascript-приложений. Пока не чесать затылок! Разберемся поподробнее. Как я сказал ранее, в этом проекте мы используем typecirpt, а баузер этого не понимает. Итак, нам нужен инструмент, который преобразует (мы называем это transpile) его в es5, который удобен браузерам. Что-то здесь бросается в глаза? Да, это делается с помощью webpack. Когда webpack пытается собрать проект, нам нужно сказать, как построить, задав набор конфигураций. Это задается с помощью файла webpack.config.js. Когда он компилирует файлы машинописного текста, он работает в тандеме с файлом tsconfig.json, который мы обсудим позже.
Создайте webpack.config.js
Ниже представлена конфигурация веб-пакета, которую мы используем в этом проекте. Различные используемые параметры конфигурации объясняются в строке.
var path = require("path");
var config = {
/* The entry point of the application. Webpack uses this information to create the dependency tree which is used to bundle the scripts.*/
entry: ["./app/App.tsx"],
/* This information is used to give the name of the bundled file and the location of the bundled file. */
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/build/",
filename: "bundle.js"
},
/* The extensions which will be imported or required in the application scripts. */
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
/* Define the loaders to be used. Regex will test the type of files on which the loader is to be applied. The excluded files are also mentioned. Loaders are used mainly to preprocess/transpile the file when imported or required in the scripts before bundling. */
loaders: [{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}]
}};
module.exports = config;
Установка ts-loader
$ yarn add ts-loader --dev
Интегрируем React
Мы установим react и react-dom как зависимости.
$ yarn add react --save $ yarn add react-dom --save
Установка определений типов
Чтобы полностью использовать возможности машинописного текста, нам нужно установить файлы определения машинописного текста для react и react-dom. Файлы определения Typescript предоставляют информацию о типе для кода javascript, который сам по себе не является статически типизированным. Это также помогает нам получать сигнатуры методов при их использовании и обнаруживать ошибки во время самой компиляции. Это файлы с расширением .d.ts. Здесь мы устанавливаем определения типов для react и react-dom.
$ yarn add @types/react-dom --dev $ yarn add @types/react --dev
Конфигурация машинописного текста
Поскольку у нас была конфигурация для webpack, нам нужна конфигурация - tsconfig.json для использования машинописного текста с react.
{
"compilerOptions": {
"jsx": "react",
"module": "commonjs",
"noImplicitAny": true,
"outDir": "./build/",
"preserveConstEnums": true,
"removeComments": true,
"target": "ES5"
},
"exclude": [
"node_modules"
]
}
Большинство из них говорят сами за себя. Обратите внимание, чтобы этот файл находился в корне проекта. Например, в complierOptions в конфигурации у нас есть опция jsx, которая сообщает, что синтаксис jsx ожидается в файле tsx, шаблон модуля - commonjs, целевая версия компиляции - es5 и т. Д. Вы можете прочитать больше здесь .
Запуск проекта
Теперь, когда базовая настройка готова, нам нужны способы сборки проекта и сервера файлов на сервере. Для варианта сборки мы уже установили webpack. Для обслуживания проекта мы можем использовать webpack-dev-server, который можно установить, как показано ниже.
$ yarn add webpack-dev-server --dev
Обратите внимание, что в пакете package.json ниже мы определили запуск и сборку в параметрах сценариев. Сценарии используются для определения того, что происходит во время различных событий жизненного цикла. Как только мы запускаем webpack-dev-server (используя ключ запуска в опции скриптов в package.json), он начинает обслуживать ваши файлы. Он также передает информацию о состоянии компиляции клиенту, который реагирует на эти события. Вы можете выбирать между различными режимами, в зависимости от ваших потребностей.
В конфигурации, указанной в нашей конфигурации webpack, webpack-dev-server будет обслуживать статические файлы в вашей папке build. Он будет следить за изменениями в ваших исходных файлах и перекомпилировать пакет всякий раз, когда они меняются.
Когда происходит перекомпиляция, измененный пакет обслуживается из памяти по относительному пути, указанному в publicPath (см. Конфигурацию webpack). Сборка не будет записана на ваш настроенный выходной путь. Если пакет уже существует по тому же пути URL, пакет в памяти имеет приоритет.
См. Файл package.json ниже:
{
"name": "react-typescript",
"version": "1.0.0",
"description": "This is a react boilerplate project using TypeScript and webpack",
"main": "App.tsx",
"repository": "https://github.com/justinpathrose/react-typescript.git",
"author": "justinpathrose",
"license": "MIT",
"scripts": {
"start": "./node_modules/.bin/webpack-dev-server --progress",
"build": "webpack"
},
"devDependencies": {
"@types/react": "^15.0.24",
"@types/react-dom": "^15.5.0",
"ts-loader": "^2.0.3",
"typescript": "^2.2.2",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}
Теперь вы готовы начать работу в своем приложении для реагирования. Чтобы запустить ваше приложение, используйте следующее из терминала
$ yarn start
Это скомпилирует ваш проект и разместит его в памяти по URL-адресу, указанному в конфигурации publicPath, как обсуждалось ранее. Приложение будет работать на http: // localhost: 8080. Обратите внимание, что всякий раз, когда вы вносите изменения в какие-либо файлы в своем проекте, он перекомпилируется, и страница в баузере обновляется. Это действительно здорово!
Чтобы выполнить сборку проекта, запустите с терминала следующее:
$ yarn run build
Это создаст папку в вашем рабочем пространстве, как указано в выходной конфигурации webpack.
Проект с вышеупомянутой настройкой размещен на GitHub. Пожалуйста, продолжайте клонировать - https://github.com/justinpathrose/react-typescript.git.
После клонирования проекта запустите следующее, чтобы начать работу!
$ yarn install $ yarn start
Переход на веб-пакет 2
В webpack 2 было внесено несколько изменений. загрузчики в конфигурации webpack теперь устарели, и теперь мы используем правила.
Исходные карты
Я также добавил возможность включения исходных карт, чтобы отладка была простой. Для этого сделано 2 изменения: одно в tsconfig, а другое в конфигурации webpack. Мы включили исходную карту в параметрах компилятора tsconfig. Это сгенерирует исходные карты. Чтобы передать это в браузер, нам понадобится webpack. Это делает еще один загрузчик - source-map-loader. Так что это необходимо обновить в конфигурации webpack. Этот загрузчик также должен быть установлен как зависимость разработчика.
Изменения присутствуют в репозитории github - https://github.com/justinpathrose/react-typescript.git.
Вы также можете сослаться на другой пакет npm - react-ts. Он имеет комплексную настройку, включая поддержку тестирования с использованием фреймворка mocha chai.
удачного кодирования!
