Webpack et es2015 : classe inconnue

Popolito
Javascript

Bonjour

Je cherche à "compiler" du code es2015, J'ai un fichier source src/test.js :

import * as test from "./ctest"
var t = new test()
t.init()

Mon fichier src/ctest.js

class test {
    constructor() {
        console.log('test constructor test');
    }
    init() {
        console.log('Init method')
    }
}
module.exports = test

Mon fichier webpack.config.js :

'use strict';
var path = require('path');
var root = path.resolve(__dirname);
module.exports = {
    entry: ["./src/test.js"],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "test.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    }
};

Mon fichier .babelrc:

{
    "presets": ["env"]
}

Mon package.json :

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10"
},

Lorsque le lance la page j'ai :

Uncaught TypeError: test is not a constructor
    at eval (test.js:9)
    at Object../src/test.js (test.js:94)
    at __webpack_require__ (test.js:20)
    at eval (test.js:1)
    at Object.0 (test.js:105)
    at __webpack_require__ (test.js:20)
    at test.js:69
    at test.js:72

6 réponses

TokaLazy
Réponse acceptée

Hello,

Est-ce que tu as essayé ça :

import test from "./ctest"
test.init()
Defy

tu n'exporte pas ta classe, ensuite tu doit l'importer dans ton fichier ou tu fait new engine

Popolito
Auteur

Comme le fichier où j'utilise la classe est le fichier index.html je ne pensais pas qu'il faille importer/exporter. Mais en essayant j'ai l'erreur Uncaught SyntaxError: Unexpected identifierà la ligne où j'importe le fichier

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>

    <script src="./dist/test.js"></script>

    <script>
        import engine from "./dist/test.js";

        var engine = new engine();
        console.log(engine);

    </script>
</body>
</html>
Defy

ha non mais ca ne marche pas comme ca, si tu bundle avec webpack, tu bundle tous tes fichier, donc tu
creer un fichier main.js qui te sert de point d'entree webpack, c´est dans se fichier que tu importe ta classe et que tu fait ton new et une fois compilé c'est ce fichier que tu ajoute au html

Kenor

Ton soucis est, à mon avis, que tu n'as pas fais le nécessaire pour exporter ta class pour pouvoir l'utiliser dans ta tag script.

lis cette réponse, ça devrait t'aider.

Popolito
Auteur

Oui je viens de comprendre que ca ne s'utilise pas du tout comme on faisait à l'ancienne :(

J'ai refais la question avec les modifs