Table des matières
Paramètres 2020 du projet React TypeScript avec webpack et Babel
Avec create-react-app, vous pouvez configurer correctement et super facilement un projet React TypeScript. Mais que faire si vous prévoyez que votre application deviendra importante? Vous feriez face à de nombreux problèmes. Par exemple, vous avez besoin de plusieurs points d’entrée, vous avez des modules node_modules qui doivent être transposés en ES5.
Dans une telle situation, il est préférable de marcher avec Webpack et Babel depuis le début. Je sais que c’est quelque chose que les ingénieurs logiciels ne veulent pas toucher car ce n’est pas du code d’application. C’est juste une configuration groupée. D’un autre côté, si vous le comprenez, cela signifie que vous avez acquis une compétence de plus!
Apprenons donc à regrouper la configuration étape par étape à partir de zéro.
L’objectif est de configurer le projet React TypeScript. Les exigences sont ci-dessous.
- Utiliser React avec TypeScript
- Permettre aux ingénieurs d’écrire ESNEXT TypeScript
- Le code fourni doit être ES5-
- Vérification de type en temps réel lors du développement
Ce sont les étapes pour atteindre les exigences
- Bundle JavaScript avec webpack
- Présentez React
- Transpile et Polyfill vers ES5
- Ajouter TypeScript
Tout d’abord, initialisons votre répertoire. Vous pouvez ignorer toutes les questions.
yarn init
Ensuite, installons l’un des principaux acteurs d’aujourd’hui, webpack! webpack est un groupeur de modules. Il résout les dépendances et regroupe les fichiers en un seul fichier.
Parce que webpack fournit un package pratique appelé serveur de développement webpack et webpack-cli, installons-les également. serveur de développement webpack est un serveur de développement avec chargement à chaud. webpack-cli est un outil cli pour les commandes webpack. Les deux accélèrent votre développement.
yarn add -D webpack webpack-cli webpack-dev-server
La prochaine chose que vous devez faire est de créer webpack.config.js fichier. Ce fichier est le principal point de connexion entre le webpack et votre code. Veuillez voir la configuration ci-dessous.
const path = require('path')module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, './dist')
}
}
Il y a trois clés principales, entrée, sortie, devServer. Lorsque vous générez, webpack prend votre ./src/main.js et génère le fichier bundle.js dans le répertoire ./dist.
D’un autre côté, la configuration devServer est utilisée lorsque vous exécutez un serveur de développement.
En fait, vous êtes déjà prêt à regrouper des fichiers js. Essayons. Veuillez créer le directeur src et le fichier ./src/main.js. Et écris ça. Ce doit être un fichier JavaScript maintenant car il n’y a pas de configuration pour transpiler TypeScript.
// ./src/main.jsconsole.log('Hello World');
Pour terminer, ajoutons quelques commandes à package.json.
{
// ...
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --mode production --progress --hide-modules"
}
// ...
}
Enfin, créez un simple fichier html dans /dist avec une balise de script bundle.js. Sans la balise de script, votre fichier js fourni ne sera jamais lu.
// dist / index.htmlTITRE ICI
Une chose que vous devez savoir, c’est que vous en avez besoin id attribut avec app dans votre html. C’est le point de montage de React.render. Sans cela, vos codes React ne seront jamais rendus.
Retour à la ligne de commande et tapez yarn dev . Plase ouvert http://localhost:8080 et les outils de développement chromés. Si vous voyez «Bonjour tout le monde», bon travail!
Je sais que vous voulez créer une application géniale. Ajoutons donc React.
yarn add react react-dom
react est pour définir des composants et gérer des choses Virtual DOM. react-dom fournit quelques méthodes pour interagir avec le vrai DOM.
Comme vous le savez, il ne suffit pas d’installer React car il est impossible de compiler React JSX. webpack est juste un bundler. Il n’y a aucune fonction pour transpiler React JSX. Il est donc temps d’utiliser Babel!
Babel est un compilateur. Cela signifie que vous pouvez transpiler le nouveau JavaScript en ancien JavaScript. De plus, Babel peut transpiler du JavaScript spécial, tel que React JSX et Vue SFC, en JavaScript normal.
La bibliothèque principale de Babel est @babel/core . Pour utiliser Babel avec webpack, vous devez utiliser babel-loader.
yarn add -D @babel/core babel-loader
Ajoutez ensuite babel-loader à la configuration du webpack. Si vous souhaitez ajouter des chargeurs, vous devez ajouter une configuration à module.rules . Pour écrire l’importation de module sans extensions, resolve section est également nécessaire. Sans cela, vous devez ajouter une extension lorsque vous écrivez l’importation, telle que import App from "./App.jsx";
// webpack.config.jsconst path = require('path')module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.(js)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
resolve: {
extensions: ['.jsx', '.js'],
},
devServer: {
contentBase: path.resolve(__dirname, './dist')
}
}
Jusqu’à présent, vous vous êtes préparé à utiliser Babel avec webpack. Mais vous n’avez pas encore de configuration Babel. Pour transpiler React JSX, vous avez besoin @babel/preset-react .
yarn add -D @babel/preset-react
Ensuite, créez babel.config.json dans le répertoire racine.
// babel.config.json{
"presets": [
"@babel/preset-react"
]
}
Vous pouvez maintenant écrire du code React! Créons et essayons! Première réécriture src/main.js .
// src/main.jsimport React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';ReactDOM.render(,
document.getElementById('app'),
);
Alors, App.jsx .
// src/App.jsximport React from 'react';export const App = () => (Hello React
);
Si vous l’essayez avec yarn dev, Tu pourrais voir Hello React !
Jusqu’à présent, votre fichier JavaScript est écrit en ES6 +. Par exemple, la fonction flèche est utilisée dans App.jsx . Cela signifie que votre application ne fonctionne pas dans les anciens navigateurs.
Pour faire fonctionner l’application dans les anciens navigateurs, deux choses doivent être faites.
- Transpile le code ES6 + en ES5-
- Polyfill
Transpile est facile à comprendre. Remplacez simplement le nouveau JavaScript par l’ancien JavaScript.
// ES6
const sayHello = () => ("hello")↓ Transpile// ES5
function sayHello(){
return "hello";
}
Polyfill est un peu différent. Il recrée les fonctionnalités manquantes que les navigateurs ne possèdent pas. Par exemple, Array.prototype.find apparaît à partir d’ES6. Cela signifie qu’il n’y a pas de version ES5 de Array.prototype.find .
Avec Babel, transpiler et polyfill n’est pas si difficile. Tout d’abord, veuillez installer certains modules.
yarn add -D @babel/preset-env core-js regenerator-runtime @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
Le module clé est @babel/preset-env et core-js. L’évolution JavaScript étant si rapide, des centaines de fonctionnalités doivent être transposées et polyfillées. Mais heureusement, @babel/preset-env est un préréglage de transpile intelligent qui couvre la plupart des fonctionnalités. Et core-jsest préréglé polyfill. Lorsque vous utilisez des fonctionnalités qui@babel/preset-env et core-js ne prend pas en charge, il est temps de penser à utiliser des plugins. Les trois autres modules sont destinés aux opérateurs de promesse, de classe et de propagation d’objets.
Bien que les comprendre clairement prenne beaucoup de temps, la configuration est facile.
// babel.config.json{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
}
Lorsque vous utilisez @babel/preset-env , deux options doivent être effectuées. Tout d’abord, la version corejs doit être spécifiée. Bien que la version 2 et la version 3 puissent être spécifiées, utilisez la version 3 car elle est maintenue. Deuxièmement, useBuiltIns doit être sélectionné. useBuiltIns définir comment ajouter des codes polyfill. Vous avez deux choix comme ci-dessous.
-
usage: ajoute en haut de chaque fichier importation de polyfills pour les fonctionnalités utilisées dans ce fichier et non prises en charge par les environnements cibles -
entry: remplace les importations decore-jsd’importer uniquement requis pour un module d’environnement cible.
Pour réduire la taille du bundle, usage est mieux.
Pour vérifier que le code de votre application est correctement transposé et polyfilled, vous pouvez créer et voir si la fonctionnalité ES6 + n’existe pas.
Jusqu’à présent, React, webpack et Babel ont été parfaitement définis. Mais je suppose que la plupart d’entre vous veulent utiliser TypeScript car cela accélère votre développement avec moins de bugs. Alors ajoutons TypeScript
Pour ajouter TypeScript, vous avez deux options de compilation.
- TypeScript Compiler (TSC) transpile TS vers ES5 JS. TSC vérifie également le type
- Babel transpile TS. TSC vérifie le type
Cet article explique la deuxième option parce que le transpillage Babel a plus de flexibilité que TSC. De plus, la responsabilité est claire. TSC est responsable de la vérification de type. Babel a la responsabilité de transpiler.
Tout d’abord, ajoutez le module TypeScript et les modules @types.
yarn add -D typescript @types/react @types/react-dom
Lorsque vous ajoutez TypeScript à votre projet, vous devez créer tsconfig.json .
// tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"module": "umd",
"lib": [
"ES2015",
"ES2016",
"ES2017",
"ES2018",
"ES2019",
"ES2020",
"ESNext",
"dom"
],
"jsx": "react",
"noEmit": true, "sourceMap": true, /* Strict Type-Checking Options */
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,/* Module Resolution Options */
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true
},
"include": ["src"]
}
Comme tu vois, lib et jsx L’option vous permet d’écrire ESNext TypeScript et TSX. Parce que TSC ne compile pas ici, noEmit l’option est vraie.
Jusqu’à présent, vous avez déjà configuré le système de type. Vous pouvez écrire TypeScript et TSX. Faisons le !
Tout d’abord, changez le nom de fichier de main.ts à Index.tsx . Parce que main.ts avoir JSX comme argument de ReactDOM.render , il provoque une erreur de type.
Prochain App.jsx . Tout d’abord, l’extension de fichier doit être .tsx . Après cela, veuillez ajouter des types. Étant donné que cet article ne se concentre pas sur le système de types, l’explication de l’implémentation détaillée serait omise.
// App.tsximport React from 'react';export const App: React.FC<{}> = () => (Hello React
);
Malheureusement, si vous essayez yarn dev , il émet des erreurs de compilation car webpack et Babel ne sont pas configurés. webpack est très simple.
// webpack.config.jsconst path = require('path')module.exports = {
// Changed file name
entry: './src/Index.tsx', ... resolve: {
// Enable webpack find ts and tsx files without an extension
extensions: ['.tsx', '.ts', '.jsx', '.js'],
},...
}
Ajoutez ensuite le compilateur TypeScript à Babel! @babel/preset-typescript est un super preset de TypeScript. Parce qu’il ne couvre pas toutes les fonctionnalités de TypeScript, veuillez ajouter des plugins si vous avez besoin de fonctionnalités supplémentaires, telles que const enum.
yarn add -D @babel/preset-typescript
La configuration est très simple. Ajoutez simplement le module à babel.config.json .
// babel.config.json{
"presets": [
"@babel/preset-typescript",
[
"@babel/preset-env",
{
"useBuiltIns": "usage",...
}
Toutes les configurations ont été effectuées 🎉 Si vous essayez yarn dev et yarn build , tout fonctionne bien! Vous pouvez enfin écrire TypeScript React!
Pour accélérer votre développement, je recommande d’ajouter la commande de vérification de type comme ci-dessous et de l’utiliser avec yarn dev .
// package.json{
// ...
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --mode production --progress --hide-modules",
"check-type": "tsc -w"
}
// ...
}
