A lot of Three.js stuff assumes a global variable THREE (for example three-bmfont-text) being assigned.
How can I tell Parcel bundler to automatically add an import to these modules, and thus avoid 'THREE is not defined' errors? Since they are external I cannot just manually add an import statement.
For webpack I'd use the providePlugin for that. Works fine, but I cannot find anything similar for Parcel.
Related
I've recently come across a way of importing font awesome icons which would allow the creation of a final bundle with only the icons in use FontAwesome documentation. I understand that the bundler (Vite in my case) applies tree shaking in order to create a smaller bundle.
I'm currently in the midst of developing an app that also uses flags. Thus I stumbled upon the following repository Flag Icons. I've installed the npm package and added the stylesheet to index.html. Everything works as expected.
Does using the library this way mean I imported all the flags in my project, even the ones I won't use? Is there a way I can create a smaller bundle with the ones I'm going to use?
I am trying to use https://www.npmjs.com/package/braintree-web with Aurelia (using the aurelia-cli and RequireJS). I am stuck trying to get all the many dependencies to resolve.
To use 3rd party library in Aurelia the library must be defined in the aurelia.json file.
If I add "braintree-web" in that file then aurelia complains that "braintree-web" it requires the modules "american-express", "apple-pay" etc etc.
If I manually create the "american-express", "apple-pay" dependencies then each one also refers to "braintree-web/lib", and a bunch of other sub-directory dependencies.
In short I can't get the "braintree-web" module to load because I have to manually build all sub-dependencies and its too complex to get working.
As I state above, I am using requireJS, should these dependencies all resolve correctly?
Any ideas as to how I can get this working?
Thanks
If all dependencies is what you need, then with requirejs + aurelia-cli you'll have to declare all dependencies. There is an experimental version of the cli being developed which you can find here, where you won't have to declare any dependencies in aurelia.json anymore.
With webpack you also don't need to declare any dependencies by the way.
Do you really need everything though? The docs mention for example you could import just the client. Still looks like a whole heap of dependencies, but at least a lot less than importing the main index.js.
You could also just include their pre-bundled client which I believe is https://js.braintreegateway.com/web/3.32.1/js/client.min.js
On a side note, the person developing aforementioned experimental CLI is actually looking for people to test it with non-trivial apps. Me and several others have tried it with great results, so I can recommend you try it. If you could report back in the PR that would be really awesome.
TL;DR:
Using Rollup, can I import D3 like Debug or can I only build a custom library?
Background
I'm trying to build my first webapp with Rollup, D3 (v4 - ES2015) and others. In search of an education, I followed Jason Lengstorf's tutorial. There I learned how to import Debug (CommonJS) and use its facilities. Works like a champ. I then tried to use D3 in the same way, only there are no default exports so used import * as d3 from 'd3' instead of the import debug from debug-style. For love or money I can't get it to work. I keep getting errors that look like:
'request' is not exported by
node_modules/d3-request/build/d3-request.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
I opened an issue with the Rollup guys. They are busy and gave me what they could — and I remain stumped. Both of Mike Bostock's examples (I and II) just show how to build custom bundles, not how to import into working code a la Debug (which is, again, CommonJS not ES2015 like D3). Is that the only way to use it? I have not experimented with another ES2015 library (not that I know any) so I don't know if this is D3-specific or I just don't understand how to deal with ES2015 libraries generally (or just simply don't understand browser-based architecture period).
Follow-on questions
Is there a web app architecture tutorial/book/something that includes ES2015-specific issues?
There seems to be as many project structures out there as people coding. Is there One True Church? Do I just have to keep bleeding from my eyes until I get my own, phoenix-like kung fu about all this (reference Jose Aguinaga's piece)?
The problem I am encountering a great number of imported files. I am trying to slowly inject webpack into a legacy site. There are many global stylesheets:
require('../../../Content/Ones/_forms.scss');
require('../../../Content/Ones/_grid.scss');
require('../../../Content/Ones/_panels.scss');
require('../../../Content/Ones/one.scss');
require('../../../Content/Ones/_grid_tools.scss');
Is there a way to avoid this? I might be just looking at this from the wrong angle because I can't seem to find a question that matches my use case.
Please advise, Thanks!
The SASS files you import (whether you import them from a JS file or another SASS file) are part of your webpack dependency tree, so they should all be watched automatically. If they're not, would you mind adding some more info to your question about your app structure and webpack config?
As for reducing the number of global SASS imports, there are a few ways to do that, but making a good choice here really depends on how your app is structured.
Side question: Is there a reason you're adding webpack to this site? Anything in particular you're hoping to gain? I ask because if it's not a component-based SPA, you might not be getting very much out of webpack, and it may not be worth the trouble.
I have some Rails code that does not fit neatly into a model or controller box. So as per this answer, I created a app/classes directory. Rails 3 seems to automatically add this to the "load path" in Rails, and my application correctly finds the classes I define in there without needing to use require statements.
However the code in app/classes does not get reloaded in development mode; if I make a change, I need to restart the server in order to see that change.
What's the proper way to make a given directory "reloadable" in Rails 3.2.x? A few answers here recommend doing:
config.autoload_paths += %W(#{config.root}/app/classes)
but I believe that this merely has the effect of adding app/classes to the initial set of directories to find code in; does not seem to make them reloadable for each request (and furthermore in 3.x it seems that app/* is automatically added).
Update:
Figures, I stumbled upon the solution a mere 30 seconds after posting the question:
I had my class wrapped inside a module. Once I removed the surrounding "MyModule", it suddenly became reloadable. Coming from a Java background, and having been burnt by Ruby code that pollutes the global namespace, I've developed a habit of putting everything inside a module. I guess Rails "app" code must live outside of any module?
Did you declare the module in a separate file, or did you declare it implicitly inside the class? This might have an effect on autoload behavior. module Foo; class Bar vs. class Foo::Bar. It might be if the Rails autoloader can't find a foo.rb to go with the Foo module it might skip reloading it.