如何运行webpack转换的函数？

Question

我有一个简单的库，我正在使用ES6，我有一些require关键字，然后，我需要将它转换成浏览器可以理解的版本，，我使用webpack来制作我的库的浏览器版本。

下面是一个示例：

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 (我用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/'));
});

现在，当我运行Gulp任务(babel和webpack)时，我将得到一个文件，它是webpack的结果(并且意味着现在所有的需求和导入都被转换了)

这是webpack的结果(我指的是转换结果)

​

/******/ (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;
	  });
	};

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

​

第一个问题是，现在我如何执行(和访问)在callMe main.js 中定义的、现在由 webpack捆绑的函数

另一个问题是，代码看起来很难看而且不简单，有什么方法可以简化它吗？

我还认为，webpack似乎只是为了将需求转换为可支持浏览器的版本，而browserify在Gulp方面也有问题。有什么建议吗？

Answer 1

如何执行(并访问)在callMe中定义的main.js函数？

你不能，因为你没有出口。您应该将代码更改为这样的内容：

import Test from './test';

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

然后您可以像这样导入它：

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

代码看起来很难看，也不简单，有什么方法可以简化它吗？

没有必要简化它。捆绑的代码看起来很难看，没有什么问题，因为无论如何，它不会被人类读取。

Answer 2

在搜索如何使用webpack公开函数之后，我把答案隐藏在评论中，所以我会在这里发布更多的信息。

我希望在加载webpack绑定脚本时，callMe()函数在全局(窗口)对象上是可见的。在我的例子中，我想通过单击按钮调用我的Angular2应用程序的延迟引导，但这只是实现细节。

因此，在main.js中，我导出了我的函数：

export function callMe(){
  console.log("I am damn called!");
  // And I do more things ;)
}

根据webpack博士，在webpack.js配置中：

module.exports = {
  entry {
    app: "dist/babel/main.js"
  }, 
  output {
    // My funky output configs...

    libraryTarget: "this"

  }
}

就这样。this引用全局窗口对象，因为它使用<script>标记加载在我的html页面中。

对不起，我不知道格尔普-webpack的配置.但是，我认为它可能只是根据webpack()将上面的对象传递给webpack医生函数就可以了。