Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I require a file that is built using browserify? #1773

Open
saeedseyfi opened this issue Nov 4, 2017 · 6 comments · May be fixed by browserify/detective#79
Open

How can I require a file that is built using browserify? #1773

saeedseyfi opened this issue Nov 4, 2017 · 6 comments · May be fixed by browserify/detective#79

Comments

@saeedseyfi
Copy link

saeedseyfi commented Nov 4, 2017

Hello browserify lords :)

I built a js library using browserify. Working well in the browser and everything looks great if I put it as a separate file in my html:

<!-- my library -->
<script src="./library/index.js"></script>

<!-- my app that uses the library -->
<script src="./app/build.js"></script>

But when I want to require the library file in my app, browserify complains.
Because the requires are still in the file and if I re-bundle it, browserify wants to re-include the files that are already included.

My files:

- library
  - src
    - core.js
    - foo.js
  - build.js
- app
  - src
    - core.js
  - build.js

library/src/foo.js:

module.exports = 'foo';

library/src/core.js:

console.log(require('./foo'));

app/src/core.js:

require('../../library/build');

library/build.js is created using browserify:

$ browserify library/src/core.js > library/build.js

Now I want to build app/src/core.js the same way ($ browserify app/src/core.js > app/build.js) but it complains: Error: Cannot find module './foo' from '/library'

I created a test repo to demo the issue: https://github.com/saeedseyfi/browserify-issue

Please advise.

@simonfan
Copy link

simonfan commented Nov 4, 2017

@saeedseyfi, hmmm would it work for you if you just required your source library/src in your application's code? In case you really need to have the library's code to be separated and be built separately, I would say the best solution would be to publish it as a separate npm package and install it through npm. That way you can require it directly by name in your application's code.

If you don't want to publish the package to npm you could just put it in a git repo and install using npm git (npm install -s git+https://github.com/someuser/some-lib).

@goto-bus-stop
Copy link
Member

goto-bus-stop commented Nov 5, 2017

yeah if possible, requiring the source files directly is ideal. if you must require a browserify bundle, you can first pass it through https://www.npmjs.com/package/derequire to rewrite the require() calls.

@saeedseyfi
Copy link
Author

saeedseyfi commented Nov 5, 2017

Thanks for your responses @simonfan @goto-bus-stop :) I'll require my source.

@saeedseyfi
Copy link
Author

Suggestion:
What if browserify changes the requires in the final bundle?!
E.g. require('./foo') to require(7) and 7 points to the part of code that is already bundled. In this scenario if you require the bundle again it only looks for the requires that point to files/modules, not numbers.
Is it practical?

@goto-bus-stop
Copy link
Member

browserify/detective#79 will make browserify ignore require calls inside browserify bundles, so it should address this too!

@ljharb
Copy link
Member

ljharb commented Feb 25, 2018

Pending browserify/detective#79

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging a pull request may close this issue.

4 participants