ES6, babel, browserify

**D-j-O** · 30/09/2015, 11h35

Salut,

Je suis dev logiciel et je suis depuis peu sur un projet JS, donc carrément débutant.
Je travaille sur un workflow de production j'ai donc mis en place des systèmes comme gulp, karma,.. Je veux que mon équipe(dev soft également) puisse bénéficier des spécificités ES6. On a donc mis en place un trasnpilage via babel. Pour gérer les modules nous utilisons browserify via babelify.
Ca semble rien rouler, excepté que je n'arrive absolument pas à utiliser le bundle généré par browserify. C'est à dire qu'un fois que j'inclue le bundle.js dans ma page html je n'ai accès à aucune fonction du bundle.

Voici un petit exemple que je n'arrive pas à faire fonctionner:
app.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
export function myTest() {
    console.log('myTest');
}

gulp

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
 
function babelify() {
    return browserifyAPI({
        entries: '../src/es6/utils/app.js',
        extensions: ['.js'],
        debug: DEBUG
    })
        .transform(babelifyAPI)
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source('bundle.js'));
}
 
gulp.task(TASK_NAME_BABELIFY, [TASK_NAME_CODE_STYLE_CHECKER, TASK_NAME_CODE_ANALYSIS], function() {
    var bundle = babelify();
    bundle.pipe(gulp.dest(OUTPUT_RELEASE_PATH));
});

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="../../build/release/bundle.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
(function testECS() {
    myTest();
})();

j'ai pour résultat: Uncaught ReferenceError: myTest is not defined

voici le code du bundle:

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
 
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
 
Object.defineProperty(exports, '__esModule', {
    value: true
});
exports.myTest = myTest;
 
function myTest() {
    console.log('myTest');
}
 
},{}]},{},[1])
//# sourceMappingURL=data:application/json;charset:utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCIvVXNlcnMvRGpPL0Rldi9TYXZhbmVKUy9zcmMvZXM2L3V0aWxzL2FwcC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7QUNFTyxTQUFTLE1BQU0sR0FBRztBQUNyQixXQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0NBQ3pCIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsIlxuXG5leHBvcnQgZnVuY3Rpb24gbXlUZXN0KCkge1xuICAgIGNvbnNvbGUubG9nKCdteVRlc3QnKTtcbn1cblxuIl19

Une idée? Merci

**D-j-O** · 30/09/2015, 16h33

Il faut faire un bundle en stand alone, c'est à dire rajouter standalone: 'leNomduStandAlone' dans les options de browserify.

ES6, babel, browserify

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager