I'am making a framework using ES6, i'am using babel to transpile code to es5 and browserify/babelify to manage module.
i have an output file bundle.js that i include in a html page. I can't access class or function of my bundle from here (Uncaught ReferenceError: myTest is not defined). I don't understand why.
export function myTest() {
console.log('myTest');
}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));
});<!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>(function testECS() {
myTest();
})();Generated bundle.js
(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])
