Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Eure (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2011
    Messages : 56
    Points : 65
    Points
    65
    Par défaut Utiliser les propriétés de classe avec Node 12, Webpack et Babel
    Salut à tous

    Je débute encore dans le monde de Node, et je développe une appli (compilée via webpack + babel avant d'être exécutée coté serveur) dans laquelle je déclare des modèles Sequelize grâce à des classes Typescript ( de cette façon: https://sequelize.org/master/manual/typescript.html )

    Prenons par exemple ma classe Event:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import { Model } from 'sequelize';
     
    import { Utilisateur, Contenu, Publicite } from '@/serveur/modeles';
     
    export default class Event extends Model {
     
        public id!: number;
        public date!: Date;
        public type!: number;
        public utilisateur_id!: number;
        public utilisateur?: Utilisateur;
        public ip!: string;
        public contenu_id!: number;
        public contenu?: Contenu;
        public publicite_id!: number;
        public publicite?: Publicite;
        public hash?: string;
     
        public static types = {
            vue: 1,
            clic: 2
        }
    }
    Le soucis, c'est que pour déclarer mes modèles sequelize en utilisant les propriétés de classe typescript, je dois désactiver plugin-proposal-class-properties. Autrement, le plugin entre en conflit avec les propriétés de classe Typescript ( https://github.com/sequelize/sequeli...ment-486030911 ) et mes modèles sequelize deviennent inutilisables (après instanciation, les propriétés sont à undefined).

    Vu que je dois rester à l'écart de plugin-proposal-class-properties, j'ai décidé de migrer vers Node 12 afin de continuer à profiter des propriétés de classe.
    La mise à jour est faite, je met à jour le numéro de version dans mon package.json et ma config webpack, et je vire plugin-proposal-class-properties.

    Ma config webpack ressemble à ça: https://gist.github.com/Gaetan-LeGac...2565153969f102

    Avant de relancer la compilation, j'essaie d'instancier mes modèles sequelize depuis Node 12 sans compilation, et ça fonctionne parfaitement.

    A ce moment, je me dis que le soucis est réglé, que webpack va remarquer que ma nouvelle version de Node supporte les propriétés de classe et que tout va se compiler sans erreur.

    Et bah non ! Une fois compilés, certains fichiers semblent contenir du charabia pour webpack

    ERROR in ./src/serveur/modeles/publicite/Event/index.ts 3:15
    Module parse failed: Unexpected token (3:15)
    File was processed with these loaders:
    * ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { Model } from 'sequelize';
    | export default class Event extends Model {
    > static types = {
    | vue: 1,
    | clic: 2
    @ ./src/serveur/modeles/factory.ts 30:0-117 74:35-40
    @ ../framework/serveur/libs/boot/modeles.ts
    @ ../framework/serveur/index.ts
    @ multi ../framework/serveur/index.ts
    Et bien sûr, j'en ai d'autres du même style

    ERROR in ./src/client/public/conteneurs/user/activate.tsx 13:8
    Module parse failed: Unexpected token (13:8)
    File was processed with these loaders:
    * ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    |
    | class Landing extends React.Component {
    > state = {
    | chargement: false,
    | erreur: '',
    @ ./src/client/public/pages/user/activate.tsx 5:0-64 18:23-31
    @ ./src/commun/cache/routes.js
    @ ../framework/commun/router.tsx
    @ ../framework/serveur/index.ts
    @ multi ../framework/serveur/index.ts

    ERROR in ./src/client/public/composants/compteur.tsx 9:8
    Module parse failed: Unexpected token (9:8)
    File was processed with these loaders:
    * ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    |
    | class Compteur extends React.Component {
    > state = {
    | pc: 0,
    | txt: '--:--'
    @ ./src/client/public/conteneurs/earn/trading/index.tsx 12:0-59 187:27-35 347:33-41
    @ ./src/client/public/pages/earn/trading/index.tsx
    @ ./src/commun/cache/routes.js
    @ ../framework/commun/router.tsx
    @ ../framework/serveur/index.ts
    @ multi ../framework/serveur/index.ts
    Ce qui a retenu mon attention, c'est cette ligne:
    You may need an additional loader to handle the result of these loaders.
    Sauf erreur d'interprétation de ma part, ces erreurs m'indiquent qu'une fois qu'il est passé par tous les loaders, le javascript compilé n'est pas censé contenir des déclarations de propriétés de classe, et que si c'est le cas, c'est que le code compilé ne correspond pas à la "version" de javascript attendue en sortie, ce qui fait râler Webpack.

    Pourtant, le target node 12 semble bien pris en compte par preset-env:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
    [11:58:16] Compiling 'server'...
    @babel/preset-env: `DEBUG` option
     
    Using targets:
    {
      "node": "12"
    }
     
    Using modules transform: false
     
    Using plugins:
      syntax-async-generators { "node":"12" }
      syntax-object-rest-spread { "node":"12" }
      syntax-json-strings { "node":"12" }
      syntax-optional-catch-binding { "node":"12" }
     
    Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
    Le javascript en sortie est donc censé correspondre à ce que Node 12 est capable d'interpréter (c'est-à-dire l'esnext stage 3 qui comprend les propriétés de classe), non ?

    Et la version de node installée sur ma machine est bien la 12:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    gaetan@gaetan-PC:~$ node -v
    v12.8.0
    Ai-je oublié quelque chose pour que Webpack comprenne bien que les propriétés de classe sont supportées par la version de Node actuellement installée ?
    Ou est-ce que je me trompe complètement, et que le code en sortie doit absolument être du Javascript et non du Node avec ses spécifités comme les propriétés de classe ?
    Peut-être que les loaders / plugins ne sont pas dans le bon ordre ?

    Merci d'avance à tous ceux qui me donneront des pistes !
      0  0

  2. #2
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Eure (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2011
    Messages : 56
    Points : 65
    Points
    65
    Par défaut
    Après plusieurs heures à m'arracher les cheveux et à fouiner sur Github, j'ai enfin trouvé une solution à mon problème (J'ai vraiment cru que j'allais y passer plusieurs journées !)
    Au lieu d'intégrer typescript à babel via le preset, j'ai ajouté ts-loader juste avant babel-loader. C'était donc une histoire d'ordre de compilation.
    Tout se compile comme avant
      0  0

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    janvier 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 22
    Localisation : France, Eure (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2011
    Messages : 56
    Points : 65
    Points
    65
    Par défaut
    Petite mise à jour: après avoir bien expérimenté avec la pseudo-solution, j'ai constaté que l'utilisation de ts-loader + babel-loader était bien plus lente (quasiment 2x plus long) que l'ancienne solution qui embarquait typescript directement dans Babel via @preset/typescript (logique, tous les fichiers sont chargés et interprétés 2 fois ...).
    En fouinant davantage sur github, j'ai appris que le preset n'est rien d'autre qu'un conteneur pour @babel/babel-plugin-transform-typescript (https://github.com/babel/babel/blob/...t/src/index.js), et que si ce dernier était executé avant @babel/plugin-proposal-class-properties, le conflit n'était plus d'actualité (https://github.com/babel/babel/issue...nt-443820095);
    Effectivement j'ai testé et c'est vrai.
    J'espère que mon topic en aidera d'autres !
      0  0

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Utiliser les propriétés d'une autre classe
    Par maparè dans le forum Langage
    Réponses: 4
    Dernier message: 05/03/2010, 17h43
  2. Utiliser les propriétés Maven dans le code
    Par minimarch76 dans le forum Maven
    Réponses: 7
    Dernier message: 17/06/2008, 12h33
  3. les propriétés des classes externes
    Par zooffy dans le forum ASP.NET
    Réponses: 12
    Dernier message: 28/01/2008, 16h10
  4. quand utiliser les modules de classe
    Par borislotte dans le forum Access
    Réponses: 3
    Dernier message: 02/03/2007, 15h56
  5. Réponses: 6
    Dernier message: 05/01/2007, 02h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo