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
gulp
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 export function myTest() { console.log('myTest'); }
html
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)); });
main.js
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>
j'ai pour résultat: Uncaught ReferenceError: myTest is not defined
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 (function testECS() { myTest(); })();
voici le code du bundle:
Une idée? Merci
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
Partager