![]() globals Specify globals dependencies, or 'none' external Specify external dependencies, or 'none' target Specify your target environment (node or web) (default web) ![]() w, -watch Rebuilds on any change (default false) f, -format Only build specified formats (default modern,es,cjs,umd) o, -output Directory to place build files into All CLI Options Usageįor more info, run any command with the `-help` flag See the wiki for a complete guide to property mangling in Microbundle. It's also possible to configure repeatable short names for each mangled property, so that every build of your library has the same output. For example: to mangle all property names beginning an underscore: Within that file, you can specify a regular expression pattern to control which properties should be mangled. Microbundle doesn't do this by default, however it can be enabled by createing a mangle.json file (or a "mangle" property in your package.json). To achieve the smallest possible bundle size, libraries often wish to rename internal object properties or class members to smaller names - transforming this._internalIdValue to this._i. "types": "dist/foo.d.ts", // TypeScript typings "source": "src/foo.js", // custom entry module (same as 1st arg to microbundle) "module": "dist/foo.m.js", // ES Modules bundle You can specify output builds in a package.json as follows: "main": "dist/foo.js", // CJS bundle Note: by setting this, it will be treated as a true, and thus, all. This can be overriden by specifying the flag, eg The default scope name when css-modules is turned on will be, in watch mode _ and when If you wish to disable all css-module behaviours set the Imports as a module, specify the cli flag -css-modules true. module.css, will be treated as a css-module. Using CSS Modulesīy default any css file imported as. ts file through either the cli or the source key in your package.json and you’re done. microbundle watchĪcts just like microbundle build, but watches your source files and rebuilds on any change. This can be overridden either by providing an amdName key in your package.json or via the -name flag in the cli. Unless overridden via the command line, microbundle uses the source property in your package.json to locate the input file, and the main property for the output.įor UMD builds, microbundle will use a snake case version of the name field in your package.json as export name. Neither require any options, but you can tailor things to suit your needs a bit if you like. Microbundle includes two commands - build (the default) and watch. This is similar to Jason Miller's Router example but also uses hooks.□ Usage I'd much prefer the module imports so I'd be curious to hear how to fix the above code, but I did manage to work around this with the following UMD approach:Ĭonst = preactHooks Navigate to the about route, then back to home and you'll see Uncaught (in promise) TypeError: u is null from the hooks script. Starting at the home route, you'll see the counter component works fine. Render(html``, document.querySelector("#app")) Am I missing something here? Can anyone help point me in the right direction? Ĭonst = useState(0) I'm able to import the useState hook from the CDN no problem, and even able to console.log() the value of the function useState, but whenever I try to use it, I get an error saying:ĭo ya'll happen to know why this is the case? I have tried to use the useState function inside of the functional component, and outside and it doesn't work either way. Currently I need to get a Preact application working without any build tools, just with an index.html with the import statements to get preact from the CDN.
0 Comments
Leave a Reply. |