javascript - JS, Browserify: function not defined - Stack Overflow

admin管理员组

文章数量:1319952

I have files as represented:

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

calc.js is a node module of following structure:

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

and tool.js use require and adds some functions, like that:

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

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

I used Browserify to generate bundle.js and added that as script src. One of my buttons on HTML page is using onclick=changeState(). After clicking I'm getting

ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick

Why is that? Is there any other way to make it work?

I have files as represented:

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

calc.js is a node module of following structure:

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

and tool.js use require and adds some functions, like that:

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

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

I used Browserify to generate bundle.js and added that as script src. One of my buttons on HTML page is using onclick=changeState(). After clicking I'm getting

ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick

Why is that? Is there any other way to make it work?

• javascript
• node.js
• browser
• module
• browserify

Share Improve this question Follow edited Aug 23, 2017 at 8:01 annterina asked Aug 23, 2017 at 7:55 annterinaannterina 17311 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

The function "changeState" is not exported in your tool.js. That means it is only visible inside your bundle.js, but not outside.

Have a look at this: https://makerlog/posts/creating-js-library-builds-with-browserify-and-other-npm-modules

It shows you how to expose your code to the global namespace in javascript.

Here's a very simple way to make it work like you want.

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

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

I have same error, here is my working example.

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

1. Must use sudo install globally

   sudo npm install -g brwoserify

   https://github./perliedman/reproject

   sudo npm install reproject // install locally is fine

   Must manually create 'dist' folder for later output file use

2. Must use --s expose global variable function 'reproject' and or 'toWgs84' you will use later in browser js.

   Without --s , will get 'reproject' undefined error . https://makerlog/posts/creating-js-library-builds-with-browserify-and-other-npm-modules browserify --help will list all options.
   -o means output file directory

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

HTML script tag include your above dist/reproject.js

Now, you will not get 'reproejct' undefined error

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

本文标签： javascriptJSBrowserify function not definedStack Overflow