49 Matching Annotations
  1. Nov 2020
    1. Microbundle also outputs a modern bundle specially designed to work in all modern browsers. This bundle preserves most modern JS features when compiling your code, but ensures the result runs in 90% of web browsers without needing to be transpiled. Specifically, it uses preset-modules to target the set of browsers that support <script type="module"> - that allows syntax like async/await, tagged templates, arrow functions, destructured and rest parameters, etc. The result is generally smaller and faster to execute than the esm bundle
    1. If I use import { createEventDispatcher } from 'svelte/internal'; instead of import { createEventDispatcher } from 'svelte'; then it seems to work because it's loading from the same module.
    1. is not required to point to "svelte": "src/main.html" if you're bundling for es, "module": "dist/main.mjs" would suffice. I mean, it's a good thing to provide a single file, not the whole sources again.
    1. But seriously, give snowpack a read to understand the benefits of leaning on standard esm imports, allowing you to avoid a bundling process entirely.
    2. I don't need to support non-esm browsers for most projects and I really like the idea of a super light build process. By removing the complexity of configuration and the overhead of bundling, svelvet makes the development process an optimal experience for myself and hopefully others
    1. Using as * adds a module to the root namespace, so no prefix is required, but those members are still locally scoped to the current document.

      distinction:

      • root namespace (so no prefix is required), but
      • locally scoped (to the current document)
  2. Oct 2020
    1. Doing so also means adding empty import statements to guarantee correct order of evaluation of modules (in ES modules, evaluation order is determined statically by the order of import declarations, whereas in CommonJS – and environments that simulate CommonJS by shipping a module loader, i.e. Browserify and Webpack – evaluation order is determined at runtime by the order in which require statements are encountered).

      Here: dynamic loading (libraries/functions) meaning: at run time

    2. Replaced nested `require` statements with `import` declarations for the sake of a leaner bundle. This entails adding empty imports to three files to guarantee correct ordering – see https://github.com/styled-components/styled-components/pull/100
    1. Uses "ES Modules" and does not support require(). Third party modules are imported via URLs:
    1. In the brave new world of ES6 + JavaScript, we have a syntax that allows us to declare the dependencies of one file to other files in our project i.e the import keyword, as well as the ability to declare the functions, classes, and variables that other files may import i.e the export keyword.
  3. Sep 2020
    1. using modulesOnly behaves exactly as expected when it warns you that the listed npm libraries do not use the ES6 format and are in fact ignored. This option is meant as a way to determine if you still have commonjs libraries in your dependencies that require special treatment via rollup-plugin-commonjs. Your code will probably not work since the listed dependencies will be missing. You should remove modulesOnly and instead add rollup-plugin-commonjs.
    1. Rollup builds atop Browserify and Webpack's lineage to make it possible to easily consume those packages, while looking to the future of JS modules.
    2. If you've followed React's guide, you've installed react from npm. You can teach Rollup how to find this package within your project's node_modules directory using the rollup-plugin-node-resolve plugin. Since React exports a CommonJS module, you'll also need to convert that into an ES6 module using the rollup-plugin-commonjs plugin.
    3. Rollup is a tool that lets you write your application using ES6 modules, even though you can't publish those modules directly to your users, because native support is only just starting to land in browsers. Rollup compiles your modules into a format that all browsers _do_ understand—a single script file—by, essentially, concatenating files together (while reordering and renaming declarations to preserve scope).
    1. In other words for those tools, you cannot create a package interface where const lib = require("your-lib") yields the same as import lib from "your-lib". With named export mode however, const {lib} = require("your-lib") will be equivalent to import {lib} from "your-lib".
    2. To make sure your ES modules are immediately usable by tools that work with CommonJS such as Node.js and webpack, you can use Rollup to compile to UMD or CommonJS format, and then point to that compiled version with the main property in your package.json file.
    3. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries
    1. Since most CommonJS packages you are importing are probably dependencies in node_modules, you may need to use @rollup/plugin-node-resolve:
    1. This is a demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup. Custom bundles can be optimized to contain only the code you need. This example exposes just three fields on the d3 object: d3.event, d3.select and d3.selectAll. The minified and gzipped bundle is only 3,691 bytes, a savings of 93% over the default build!
    1. The module specifier is always fixed. That is, you can’t change what you import depending on a condition. And you can’t assemble a specifier dynamically.
    1. It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.
  4. Dec 2019
  5. Nov 2019
    1. One of the more confrontational parts of JavaScript development has always been its module system
  6. Sep 2019
  7. Jun 2019
    1. In this article, we are going to talk about the same kind of much-debated back-end programming technologies like Node.Js and PHP! We will know how do they differ from each other and why Node.js vs PHP is such a hot topic among developers.
  8. Feb 2017
    1. select proprietary or out-of-tree modules (ex. vitualbox, nvidia, fglrx, bcmwl, etc.)

      If anyone is wondering what other modules they refer to, or how to discover any on your own system, this StackExchange thread on how to identify out-of-tree modules might help.