JS，Browserify：函数未定义

Question

我有如下所示的文件：

-js/
    - calc.js
    - tool.js
-index.html

calc.js 是以下结构的节点模块：

module.exports = {
   calculate: function() {...},
   getPrecision: function() {...}
}

和 tool.js 使用 require 并添加一些功能，例如：

const fpcalc = require('./fpcalc');

function changeState() {
//some code using fpcalc
}

我使用 Browserify 生成 bundle.js 并将其添加为脚本 src。 我在 HTML 页面上的一个按钮正在使用 onclick=changeState()。点击后我得到

ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick

这是为什么？有没有其他方法可以让它发挥作用？

Answer 1

函数 "changeState" 未在您的 tool.js 中导出。 这意味着它仅在您的 bundle.js 内部可见，而在外部不可见。

看看这个：https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules

它向您展示了如何将您的代码暴露给 javascript 中的全局命名空间。

Answer 2

我有同样的错误，这是我的工作示例。

mac, browserify https://github.com/perliedman/reproject

1. 必须使用sudo全局安装

   sudo npm install -g brwoserify

   https://github.com/perliedman/reproject

   sudo npm install reproject // install locally is fine

   必须手动创建 'dist' 文件夹供以后输出文件使用

2. 必须使用--s expose global variable function 'reproject' and or 'toWgs84' 你稍后会在浏览器js中使用。

   没有 --s ，将得到 'reproject' undefined error 。 https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules browserify --help 将列出所有选项。
   -o表示输出文件目录

   browserify node_modules/reproject/index.js --s reproject -o node_modules/reproject/dist/reproject.js

HTML 脚本标签包括你上面的 dist/reproject.js

现在，您将不会收到 'reproejct' 未定义错误

return reproject(_geometry_, ___from_projection, proj4.WGS84, crss)

Answer 3

这里有一个非常简单的方法可以让它按您想要的方式工作。

const fpcalc = require('./fpcalc');

window.changeState = () => {
    //some code using fpcalc
}