В какой-то момент моей борьбы с Flow-Type на VSCode я согласился, что мне нужно перейти на TypeScript. Поддержка Flow-Type обеспечивается сторонним плагином и совершенно неудовлетворительна.
Если файл невалидный с точки зрения Flow-Type, то перестают работать переходы внутри кода между файлами, например.
И я не могу заставить себя вернуться в WebStorm после знакомства с VSCode. Microsoft, как обычно, полностью тянет время.
Если вам нравится VSCode, приобретите TypeScript. Если бы кто-то сказал мне год назад, что я снова стану фанатом Microsoft, это было бы трудно себе представить.
Но происходят и более удивительные вещи.
Я в полном восторге от качества китайцев.
набор компонентов React от Ant-Design .
И хотя он написан на TypeScript, для его установки нужно вавилон-плагин-импорт .
Но как нам остаться на Create React App (CRA)? Babel был удален из версии TypeScript (CRA-TS).
Поддерживать собственную версию CRA кажется безумием.
Перспективный Preact-CLI (как замена CRA) не обеспечивает необходимого уровня совместимости с React. Но, играясь с Preact-CLI, я заметил, что preact.config.js очень похож на реагировать-приложение-перемонтировано , который я активно использую для обхода ограничений конфигурации Webpack в CRA. Я сравнил этот факт с идеей перевода CRA-TS из ts-loader в Awesome-typescript-loader, внутри которого можно включить Babel. И вуаля! 0) установить приложение create-реагировать
1) создать проект$ npm install -g create-react-app
$ create-react-app cra-ts-antd --scripts-version=react-scripts-ts
$ cd cra-ts-antd/2) добавить пакеты
$ yarn add react-app-rewired react-app-rewire-less awesome-typescript-loader babel-core babel-plugin-import babel-preset-react-app -D3) добавьте config-overrides.js
module.exports = function override(config, env) {
const tsLoader = config.module.rules.find(conf => {
return conf.loader && conf.loader.includes('ts-loader')
})
tsLoader.loader = require.resolve('awesome-typescript-loader')
tsLoader.query = {
useBabel: true,
}
const tsLintLoader = config.module.rules.find(conf => {
return conf.loader && conf.loader.includes('tslint-loader')
})
tsLintLoader.options = tsLintLoader.options || {}
// FIXED Warning: The 'no-use-before-declare' rule requires type infomation.
tsLintLoader.options.typeCheck = true
const rewireLess = require('react-app-rewire-less')
config = rewireLess(config, env)
const path = require('path')
// For import with absolute path
config.resolve.modules = [path.resolve('src')].
concat(config.resolve.modules)
return config
}
4) изменить package.json; код подключает оболочку, перемонтированную в приложение-реагирование
"scripts": {
- "start": "react-scripts-ts start",
- "build": "react-scripts-ts build",
+ "start": "BROWSER=none react-app-rewired start --scripts-version react-scripts-ts",
+ "build": "react-app-rewired build --scripts-version react-scripts-ts",
}5) изменить tsconfig.json; код, среди прочего, включает настройки абсолютного импорта
{
"compilerOptions": {
+ "allowSyntheticDefaultImports": true,
+ "baseUrl": ".
",
+ "paths": {
+ "*": ["*", "src/*"]
+ },
- "jsx": "react",
+ "jsx": "preserve",
},
"exclude": [
+ "config-overrides.js",
]
}
6) добавить .
babelrc; код назначает необходимый пресет и подключает вавилон-плагин-импорт {
"presets": ["react-app"],
"plugins": [
["import", { "libraryName": "antd", "style": false }]
]
}
7) добавить антд; версия исправлена, т.к.
найдена в следующей версии 2.12.3 ошибка $ yarn add [email protected]
8) добавьте src/resources/main.less; код переопределяет переменную @import "~antd/dist/antd.less"; // import official less entry file
@primary-color: #1DA57A;
9).
и подключим его к index.tsx; импорт по абсолютному пути из src + import 'resources/main.less';
10) изменить App.tsx import * as React from 'react';
import '.
/App.css'; + import { Button } from 'antd'; const logo = require('.
/logo.svg');
class App extends React.Component<{}, {}> {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="логотип" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit `src/App.tsx` and save to reload.
</p>
+ <Button type="primary">Test</Button>
</div>
);
}
}
export default App;
Исходники на GitHub
Теги: #вискас #разработка сайтов #JavaScript #react.js
-
Эволюция Отказоустойчивости В Postgresql
19 Oct, 24 -
Valve Объявила Steam Greenlight
19 Oct, 24 -
Создание Pgmodeler
19 Oct, 24 -
Универсальные Платформы – Это Зло
19 Oct, 24 -
Nokia Анонсирует Prism. Два Куска
19 Oct, 24
