In this example, we export two functions ( sum and div) from a CommonJS module but only one of them ( sum) is imported and used. Let’s compare how Webpack bundles CommonJS and ES6 modules. That’s why static analysis of used and unused exports is impossible for CommonJS modules. On the other hand, CommonJS exports are resolved at run time and can be dynamic. Since ES6 imports/exports are a part of JavaScript syntax, it’s quite easy to perform a static analysis of used and unused exports. Wait! If tree-shaking is the removal of unused code from bundles, then how is it different from “dead code elimination” that has been a feature of JavaScript minifiers for quite a while? It’s a fair question, and the answer is that tree-shaking is a later term that is only relevant if JavaScript bundlers and ES6 imports/exports are used.īundlers analyze ES6 imports/exports at build time to find unused code. It’s both my hobby and job at Cube where we create and maintain open source tools for building data applications. This is a part of the series of posts on best practices where I’m sharing bits of my experience contributing to open source. If you’re building a JavaScript library, is a must. You’ll know to write JavaScript code in a tree-shakeable way and produce smaller bundles. In this blog post, we’ll learn more about tree-shaking and tree-shakable design. However, do you know that not all code that looks unused is tree-shakeable? It’s often understood as the removal of unused code from JavaScript bundles. *In that thread they’re trying to load the module remotely from I’d rather do it locally, although maybe I should try that.If you’re a web developer, I’m sure that you’ve heard about tree-shaking. Is there a recommended way to add an NPM module to a Discourse plugin? This thread says to copy the module’s folder into your /lib/ folder that’s not working for me.* Can you point me to an example of someone successfully shipping a complex NPM module with a Discourse plugin so I can see what I’m doing wrong? The library works on my computer and in another plugin I’ve written. I’ve tried adding punycode into the compiled module, I’ve tried uploading it to the lib folder and adding register_asset 'lib/punycode.js' to plugin.rb, and I’m not having much luck. I’ve tried bundling the whole thing into one file using Webpack, but for some reason the bundle is missing a third-party library called “punycode”. When it tries to load ArgdownApplication.js it says “Uncaught ReferenceError: exports is not defined.” It’s a large library with lots of submodules - argdown.js requires ArgdownApplication.js and a bunch of others. Now that I have the correct path to it, the library is misbehaving. Thank you, that’s very helpful! Putting my library in the assets/lib folder is helping a lot. This is probably simple and there’s something obvious I’m missing. Digging through Discourse’s code to try to understand the bundling system.Looking for other plugins that require third-party libraries - can’t find any that use strategies I’m not using. Putting :server_side at the end of my register_asset line in plugin.rb, since that’s where this should run.es6 on the file extension - other JS files seem to need that to run Lots of permutations on the import line.I’ve tried lots of variations on the above and I keep getting Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown. In assets/javascripts/discourse-markdown/argdown.js.es6, I’m doing import from "argdown-core.js".In my plugin.rb file, I’m doing register_asset 'javascripts/argdown-core.js'.In my app’s assets/javascripts folder, I have a file named argdown-core.js.I’ve been trying for a couple of hours to get a JS library to load inside my plugin. Sorry for necroing this thread, but this is where Google has brought me.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |