Uncaught ReferenceError: exports is not defined

med001
Javascript

Bonjour,
j’intègre jquery en typescript mais je trouve un erreur qui bloque mon travaille .. l'erreur est: " Uncaught ReferenceError: exports is not defined "

code app.ts:

import * as $ from 'jquery'

$('.test').click(function(eventObject){
    alert('good morning');
    $('.ml').text("bonjour")
})

code app.js:

"use strict";
exports.__esModule = true;
var $ = require("jquery");
$('.test').click(function (eventObject) {
    alert('good morning');
    $('.ml').text("bonjour");
});

code tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "lib": ["es2016","dom"],
        "pretty": true,
        "experimentalDecorators":true
    },

    "files": [
        "app.ts",
        "typings/index.d.ts",
    ],

    "excluse": ["node_modules"]
}

code index.html:

<!DOCTYPE html>
<html>
<head>
    <title>test TS</title>
</head>
<body>
    <button id="test">ici</button>

<div id="ml"></div>
    <script src="app.js"></script> 
</body>
</html>

comment résoudre ce problème .. aussi je trouve ce problème mais par le clé 'required'

7 réponses

Balsakup
Réponse acceptée

@med001 alo balskap !?

Pas besoin de dire Allô, je suis pas à ta merci

Pour ma part, quand j'ai des projets TS en AMD, je fais comme ça. J'exporte tous sous forme de classe et ça fonctionne

Message.ts

export default class Message { ... }

App.ts

import Message from './Message';

export default class App {

    public static main() {
        /**  Méthode principale **/
    }

}

index.html

require([ 'path_to_js/App' ], function (app) {
    app.default.App.main();
});
Balsakup

Salut,

c'est normal, tu compiles en commonjs, les navigateurs ne savent pas lire ce format. commonjs est plutôt destiné au NodeJS.

Ce que tu peux faire, c'est compiler en AMD et utiliser requirejs qui est capable de lire le format AMD

med001
Auteur

voila une autre exemple avec "amd" et "requirejs" mais toujours même probléme

code Message.ts:

import * as $ from 'jquery'

        export default class Message {
            show() {
                $('#shownbtn').html("demo");
                alert("good")
            }

        }

code app.ts:

import msg from './Message'
    import * as $ from 'jquery'

    $(function(){
        $('#shownbtn').on('click',function(){
            var o = new msg()
            o.show()
        });
    });

code app.js:

"use strict";
    exports.__esModule = true;
    var Message_1 = require("./Message");
    var $ = require("jquery");
    $(function () {
        $('#shownbtn').on('click', function () {
            var o = new Message_1["default"]();
            o.show();
        });
    });

code tsconfig.json:

{
          "compilerOptions": {
            /* Basic Options */
            "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
            "module": "amd",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
            "strict": true,
                                        /* Enable all strict type-checking options. */
          },

          "files":[
                "typings/index.d.ts",
                "ts-src/app.ts"
            ]
        }

code index.html:

<!DOCTYPE html>
        <html>
        <head>
            <title>test TS</title>
            <script src="node_modules/requirejs/require.js" data-main="ts_src/app.js"></script>
        </head>
        <body>

        <button id="shownbtn">ici</button>

        <script src="ts_src/app.js"></script>
        </body>
        </html>

mais toujours la même probléme

med001
Auteur

alo balskap !?

med001
Auteur

ah je comprend principe on fait export pour class ou fonction pour dire a typescript que ce fonction ou class peut utilisée comme module dans un autre fichier (avec import) .. mais juste une seule question quelle est la rôle de require js .. c'est bon je compris que la module amd pour browser et commonjs pour serveur mais c'est quoi la rôle du requirejs ??

Balsakup

requirejs est une lib qui permet de comprendre le javascript compilé en AMD, sans requirejs tes modules ne seront pas interprétés

med001
Auteur

merci beaucoup amigos @Balsakup