Configuration d'une nouvelle version de webpack pour ma configuration locale à utiliser sur l'ensemble du système. Aka construire ma configuration de pack Web en tant que package de nœud privé car tout mon travail est littéralement le même, donc le construire en tant que package global. Similaire au concept de laravel mix.

Quoi qu'il en soit, j'ai obtenu la configuration du pack Web transpilant correctement le Typescript, tout semble bon et fonctionne comme prévu lorsqu'il est appelé dans un navigateur. Cependant, je rencontre un problème lorsque j'importe un fichier .json dans un fichier TS à l'aide de import * as json from 'somewhere-over-the-rainbow.json ;

Code transpilé

(()=>{var e={27:e=>{e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},963:e=>{function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}},536:e=>{e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}}},t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);n.r(r);var o={};if(2&t&&"object"==typeof e&&e)for(const t in e)o[t]=()=>e[t];return o.default=()=>e,n.d(r,o),r},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";var e=n(27),t=n.n(e),r=n(963),o=n.n(r),i=n(536),a=n.n(i);const u=["Example"];var l=n.t(u,2);(function(){function e(){t()(this,e),a()(this,"components",void 0),this.components=l}return o()(e,[{key:"init",value:function(){this.attachComponents()}},{key:"attachComponents",value:function(){}}],[{key:"build",value:function(){console.log("TEST"),(new e).init()}}]),e})().build()})()})();

Comme vous pouvez le voir, cela se traduit par 2 "lignes" étant for(const t in e)o[t]=()=>e[t]; et const u=["Example"];

Si je supprime l'import .json, le code se transpile comme prévu

(()=>{var e={27:e=>{e.exports=function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}},963:e=>{function n(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}}},n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{}};return e[r](o,o.exports,t),o.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{"use strict";var e=t(27),n=t.n(e),r=t(963),o=t.n(r);(function(){function e(){n()(this,e)}return o()(e,[{key:"init",value:function(){this.attachComponents()}},{key:"attachComponents",value:function(){}}],[{key:"build",value:function(){console.log("TEST"),(new e).init()}}]),e})().build()})()})();

J'ai peaufiné sans cesse les options de Babel Preset, la seule option qui semblait transpiler mon code de test sans const était de régler module sur commonjs, ce qui semblait louche donc cela a été annulé (soyez bon de savoir si c'est bien).

Est-ce que quelqu'un a une idée à ce sujet? Ma perception est que le Babel Loader fait réellement son travail, mais le JSON est "chargé" après que Babel a transpilé TS > ES, ce qui pose le problème de la présence du code ES6 dans le code ES5.

Règles Webpack et configuration TS ci-dessous

            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-proposal-class-properties',
                                    '@babel/plugin-proposal-object-rest-spread',
                                    '@babel/plugin-transform-runtime'
                                ],
                                presets: [
                                    '@babel/react', 
                                    '@babel/preset-typescript',
                                    [
                                        '@babel/preset-env',
                                        {
                                            targets: [
                                                '>0.25%'
                                            ]
                                        }
                                    ]
                                ]
                            }
                        },
                        exclude: /node_modules/
                    },
                    {
                        test: /\.s[ac]ss/i,
                        use: [
                            miniCssExtract.loader,
                            'css-loader',
                            'sass-loader'
                        ]
                    }
                ]
            }

tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "./src",
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "jsx": "react",
        "module": "esnext",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "removeComments": true,
        "resolveJsonModule": true,
        "outDir": "dist",
        "strict": true,
        "target": "es5"
    }
  }

Remarque : j'ai traité la sortie de Transpiled Code ci-dessus via le transpileur en ligne de Babel (à l'aide du préréglage es2015) et la sortie est comme prévu, c'est-à-dire que tout change en var.

Merci pour toute aide :)

0
alexjkni.dev 10 nov. 2020 à 13:40

1 réponse

Meilleure réponse

Vous pouvez essayer ceci:

const json = require('path-to-file.json');
0
Gh05d 10 nov. 2020 à 11:38