Utiliser les propriétés de classe avec Node 12, Webpack et Babel
Salut à tous :mrgreen:
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:
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 ! :aie: Une fois compilés, certains fichiers semblent contenir du charabia pour webpack :weird:
Citation:
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 :aie:
Citation:
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:
Citation:
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:
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:
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 !
