web-dev-qa-db-fra.com

Créer-réact-app + modules TypeScript + CSS: Type de génération automatique Définitions sans éjecter de l'ARC

problème

create-react-app v2 + prend en charge les modules dactylographiés et CSS hors de la boîte ... séparément. Le problème se pose lorsque vous essayez d'utiliser les deux ensemble. Facebook avait une vaste discussion À propos de cette question et finalement fermée le github. Les développeurs doivent donc utiliser des hacks et d'autres solutions de contournement pour obtenir ces deux technologies de jouer bien ensemble aux côtés de l'ARC.

Solution existante :

Vous pouvez créer manuellement ComponentName.module.css.d.ts Fichiers avec définitions de type comme ceci: export const identifierName: string. Cela vous permet de tirer parti de la saisie de type TypeScript et du code VS du code VS lorsque vous allez à l'importation ComponentName.module.css. Malheureusement, c'est extrêmement fastidieux.

solution (?) :

Les gens sur Dropbox créé typed-css-modules-webpack-plugin Pour résoudre ce problème; Il génère automatiquement ces *.d.ts Fichiers pour vous. Ils montrent comment l'installer avec yarn ou npm puis donner cet exemple de code minimal:

const path = require('path');
const {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          // Use CSS Modules
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  // Generate typing declarations for all CSS files under `src/` directory.
  plugins: [
    new TypedCssModulesPlugin({
      globPattern: 'src/**/*.css',
    }),
  ],
};

Malheureusement, il n'est pas immédiatement clair comment je peux l'utiliser avec create-react-app. Je ne suis pas très compétent en ce qui concerne la page Web, et j'utilise customize-cra Pour éviter d'éjecter create-react-app Donc, je peux personnaliser les configurations WebPack pour certaines choses dont j'ai besoin. Par exemple, la conception Ant vous permet d'importer des composants à la demande en utilisant babel-plugin-import comme détaillé ici:

https://ant.design/docs/react/use-in-typescript#use-Babel-plugin-import

Question : Comment puis-je convertir le code de configuration WebPack ci-dessus en un customize-cra équivalent pour que je n'ai pas à éjecter de l'ARC?

reactjstypescriptwebpackcreate-react-appcss-modules
6
AlexH

D'accord, alors je finis finalement cela, et j'ai écrit un article de blog sur le sujet de quiconque rencontre un problème similaire:

https://aleksandrhovhannisyana.github.io/blog/dev/how-to-set-up-react-typescript-ant-design-less-css-modules-and-eslint/#3-create-react -App-CSS-Modules-and-Thypscript -

La solution utilise le TypeScript-plugin-css-modules Plugin. Voici les bits pertinents de mon article de blog:

yarn add -D TypeScript-plugin-css-modules

Après son installation, ajoutez le plugin à votre TSConfig.json:

{
  "compilerOptions": {
    "plugins": [{ "name": "TypeScript-plugin-css-modules" }]
  }
}

Ensuite, créez un fichier nommé global.d.ts Dans votre répertoire SRC. Vous n'avez pas à nommer It global, au fait; Vous pouvez nommer le fichier ce que vous voulez, tant qu'il a le .d.ts extension. Entrez ces contenus:

declare module '*.module.less' {
  const classes: { [key: string]: string };
  export default classes;
}

Si vous souhaitez également utiliser Sass ou CSS, ajoutez simplement plus de déclarations de module et modifiez l'extension sans problème.

Nous sommes presque terminés! Pour les instructions d'utilisation du plugin, si vous souhaitez que IntelliSense fonctionne dans le code VS, vous devez forcer le code VS pour utiliser votre version d'espace de travail de TypeScript au lieu de la version installée dans le monde. Rappelez-vous quand nous avons installé des documents dactylographiés via CRA au tout début? C'est notre version d'espace de travail de Typescript.

Voici comment utiliser la version d'espace de travail de Typescript dans VS Code:

  1. Ouvrez tout fichier dossier.

  2. Cliquez sur le numéro de version de la barre d'état bleu au bas du code VS.

  3. Sélectionnez Utiliser la version de Workspace (3.7.3 à partir de cette écriture).

Voici une capture d'écran pour rendre cela plus clair:

enter image description here

Une fois que vous avez fait cela, le code VS créera un répertoire .vscode dans votre projet pour les paramètres de l'espace de travail.

À ce stade, vous êtes tous réglées pour utiliser des modules CSS avec TypeScript.

1
AlexH

Eh bien, tout est correct comme dit Alexh. 1 dans ttsconfig.ts.

{
  "compilerOptions": {
    "plugins": [{ "name": "TypeScript-plugin-css-modules" }]
  }
}

2 dans global.d.ts

declare module '*.module.less' {
  const classes: { [key: string]: string };
  export default classes;
}

3.Mais aussi dans TSConfig, vous devriez faire

 "include": [
    "global.d.ts",
     ...
  ]
0
Gorr1995