相关疑难解决方法(0)

Browserify - 如何调用浏览器中通过browserify生成的文件中捆绑的功能

我是nodejs和browserify的新手.我从这个链接开始.

我有文件main.js,其中包含此代码

var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

this.LogData =function(){
console.log(unique(data));
};
Run Code Online (Sandbox Code Playgroud)

现在我用npm安装uniq模块:

 npm install uniq
Run Code Online (Sandbox Code Playgroud)

然后我使用browserify命令将从main.js开始的所有必需模块捆绑到一个名为bundle.js的文件中:

browserify main.js -o bundle.js
Run Code Online (Sandbox Code Playgroud)

生成的文件如下所示:

(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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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){
var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

this.LogData =function(){
console.log(unique(data));
};

},{"uniq":2}],2:[function(require,module,exports){
"use strict"

function unique_pred(list, compare) …
Run Code Online (Sandbox Code Playgroud)

node.js npm browserify

79
推荐指数
6
解决办法
3万
查看次数

从HTML文件访问捆绑的javascript中的功能(使用webpack)

我当前正在开发一个Web应用程序,并且正在重构我的代码,因此它与WebPack捆绑在一起。

在我的HTML中,有一个按钮,sendMessage()当单击该按钮时会调用该函数,

<button type="button" class="btn btn-default" onclick="sendMessage(document.getElementById('claim').value)">Submit</button>
Run Code Online (Sandbox Code Playgroud)

在我的代码的第一个版本中,该sendMessage()函数是在.js我直接导入HTML 的文件中定义的,

<script src="my_js/newsArticleScript.js"></script>

sendMessage()函数直接在文件中声明,它不在任何类或模块中,但它调用在同一文件中定义的其他函数,因此我不想将其分开。

但是现在它被WebPack捆绑了。这是我的配置文件(homepageScript.js用于另一页):

<button type="button" class="btn btn-default" onclick="sendMessage(document.getElementById('claim').value)">Submit</button>
Run Code Online (Sandbox Code Playgroud)

我将HTML上的脚本导入更改为导入捆绑版本。现在,当我按下按钮时,我得到了错误

[Error] ReferenceError: Can't find variable: sendMessage

我已经读过它,并且了解到webpack不会全局公开这些功能。我试图导出该函数,但一直收到相同的错误。

谁能帮我这个?从本质上讲,我需要了解如何配置Webpack或更改JS,以便可以通过HTML对其进行访问。

我是JS的新手,所以我很确定我的应用程序的设计方式不是最好的,因此,任何有关改进的技巧(也许我应该使用模块,或者有单击按钮时调用JS函数的更好方法)都可以也欢迎。谢谢 :)

html javascript node.js ecmascript-6 webpack-2

3
推荐指数
1
解决办法
1834
查看次数

标签 统计

node.js ×2

browserify ×1

ecmascript-6 ×1

html ×1

javascript ×1

npm ×1

webpack-2 ×1