How to run functions that converted by webpack?

Question

I have a simple library, and I am working with ES6, and I have some require keyword, then, I need to convert this to a version that browsers understand it, I use webpack to make the browser version of my library.

Here is an example:

---

main.js

import Test from './test';

function callMe(){
    console.log("I am damn called!");
}

---

test.js

export default function(string) {
  console.log("This is awesome!");
  [1,2,3].map(n => n + 1);
}

---

gulpfile.js (I use Gulp)

var gulp = require('gulp');
var babel = require('gulp-babel'); 
gulp.task('babel', () => {
    return gulp.src('src/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist/babel'));
});


var webpack = require('gulp-webpack');
gulp.task('webpack', function() {
  return gulp.src('dist/babel/main.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

---

Now when I run the Gulp tasks (babel and webpack), I will get a file which is the result of webpack (and means all require and import are converted now)

Here is the result of webpack (I mean the convert result):

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};

/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {

/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;

/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};

/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;

/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}


/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;

/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;

/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";

	var _test = __webpack_require__(1);

	var _test2 = _interopRequireDefault(_test);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	function callMe() {
		console.log("I am damn called!");
	}

/***/ },
/* 1 */
/***/ function(module, exports) {

	"use strict";

	Object.defineProperty(exports, "__esModule", {
	  value: true
	});

	exports.default = function (string) {
	  console.log("This is awesome!");
	  [1, 2, 3].map(function (n) {
	    return n + 1;
	  });
	};

/***/ }
/******/ ]);

The first question is, now, how can I execute (and access) the callMe function that defined in main.js and now bundled by webpack?

The other question is that, the code looks ugly and not simple, is there any way to simplify it?

And I also think webpack seems to be something else that just be for converting require to a browser supportable version, and browserify had problems with Gulp. Any suggestion?

Answer 1

How can I execute (and access) the callMe function that defined in main.js?

You can't, because you didn't export it. You should change your code to something like that:

import Test from './test';

export default function callMe(){
  console.log("I am damn called!");
}

Then you can import it like that:

import callMe from 'dist/main.js';
callMe(); // logs "I am damn called!"

The code looks ugly and not simple, is there any way to simplify it?

There's no need to simplify it. There's nothing wrong with bundled code looking ugly, because anyway it's not going to be read by humans.