如何运行由 webpack 转换的函数？

Posted 2023-03-08

【中文标题】如何运行由 webpack 转换的函数？

【英文标题】：How to run functions that converted by webpack?

【发布时间】：2017-04-04 22:41:09

【问题描述】：

我有一个简单的库，我正在使用 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 的结果（意味着现在所有 require 和 import 都已转换）

这是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 似乎只是用于将 require 转换为浏览器支持的版本，而browserify 与 Gulp 有问题。有什么建议吗？

【参考方案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!"

代码看起来丑陋不简单，有什么办法可以简化吗？

没有必要简化它。捆绑代码看起来丑陋并没有错，因为无论如何它不会被人类阅读。

【讨论】：

非常感谢，我想为你的答案投票，但它说我需要更多的声誉。也许你应该投票支持我的问题，然后我可以投票给你

@Lash 你仍然可以accept我的回答。

哦！是的，我有一个问题。运行 javascript 时仍然无法调用“callMe()”

您能为此分享任何资源吗？我根本不知道

@Lash 你是如何运行它的？你遇到了什么错误？

【参考方案2】：

由于搜索如何使用 webpack 公开函数 将我带到这里，而答案隐藏在 cmets 中，我将在此处发布它以便更明显。

我希望 callMe() 函数在加载我的 webpack-bundeled-script 时在全局（窗口）对象上可见。就我而言，我想通过单击按钮来调用 Angular2 应用程序的延迟引导，但这只是实现细节。

---

所以在main.js我导出我的函数：

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

并且根据the webpack docs，在webpack.js 配置中我这样做：

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

    libraryTarget: "this"

  

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

对不起，我不知道 Gulp-webpack 的配置。但我认为根据the gulp-webpack docs 将上述对象传递给webpack() 函数可能会起作用。