I know browserify can consume UMD modules by means of transforms, but when I want to build a lib using browserify, how can I build an UMD module? Is there any transform I can use?
If you want to build a UMD module with browserify use the standalone option. Like:
browserify('./entry.js', {
standalone: 'moduleName',
})
From the CLI: browserify -s NameOfModule
This creates a standalone module exposed under the name of your choosing.
Utilize by loading the output file in a browser and access via window.NameOfModule, or see RequireJS docs on how to use it that way.
Related
I'm trying to create a compiled an packaged version of my Vue Single File component to distribute and dynamically load it via HTTP.
I found this article from Markus Oberlehner that uses Vue CLI v3 with the following command:
npx vue-cli-service build --target lib --formats umd-min --no-clean --dest server/components/MyComponent --name "MyComponent.[chunkhash]" server/components/MyComponent/MyComponent.vue
It seems to work fine, however, I would like to use Vite instead. Is that possible? Which is the equivalent command?
Author of the original article here.
I recommend you look into Module Federation. When I wrote the original article, it did not exist yet. Nowadays, I'd 100% go for Module Federation instead of rolling my own.
There is also a Vite plugin for it: https://github.com/originjs/vite-plugin-federation
I'm trying to build a library (mostly some .vue components) to reuse in different projects (no public npm) with vue-cli-service. Apparently everything its already setup, and I can confirm that the build is fine (js, and css). However, I'm unable to use it in a separate project as an external module because it uses the spread operator (and probably more ES20XX features no yet parsed).
Module parse failed: Unexpected token (2683:8)
You may need an appropriate loader to handle this file type.
| params() {
| const queryParams = {
| ...this.filters,
| ...this.sorting,
| ...this.config.params,
This is the standard command I'm using to build the library
vue-cli-service build --target lib --name [mylibname] ./src/components/index.js
By default the bundle should be already polyfilled but it seems to me that it's not the case.
I've read that I might change the webpack configuration on the project I'm using into, but I'm against parsing the whole node_module folder and also I would love to just have the simplest workflow possible (like import a module and its css).
So my question is, how to polyfill my bundle to be perfectly usable in no matter what Vue project without any hassle ?
Ok, it seems that reinitializing the project with vue-cli without typescript and with separated configuration files instead of into package.json was a good idea, as now is transpiled as needed.
var queryParams = _objectSpread({}, this.filters, {}, this.sorting, {}, this.config.params);
Unfortunately the hidden configuration of vue-cli webpack can't help to see what has changed.
I'm looking for simple module loading for import/export es6 modules transpiled by babel.
Start with es6 source files with import/export modules for use in the browser
Statically transpile this to es5 with babel, with a config specifying whichever module transform (amd, commonjs, systemjs) is simplest to load.
Do not use npm for the modules, nor any other complex workflow. Just babel transpiled files.
Load these es5 files with modules, with a <script> to load a library that the babel transpilation used for loading es6 modules.
I'd like to avoid browserify, webpack, jspm etc. Just simple transpiled es6->es5 and using the library babel compiled modules to. I don't need bundling. We're talking simple, basic javascript here.
Is this possible? If so, how?!
All the module loading discussions I've seen use complex workflows that seem to me to be unnecessary. I'd like to simply use es6 import/export in a set of files and use them as simply as possible in the browser.
Guy Bedford answered this in the SystemJS Google Group:
https://groups.google.com/forum/?hl=en#!topic/systemjs/a7vB2YmdXp8
Here is a talk I gave on it to my team, the details are at the end:
http://backspaces.net/temp/Modules.pdf
The short version is: configure babel to have babel-plugin-transform-es2015-modules-systemjs, run your modules thru babel with just this transform unless you need more of the es6 features (Chrome is 91% complete), and have your html include:
<script src="system.js"></script>
and
<script>
System.import('lib/main');
</script>
No webpack, npm/browserify, jspm, bundling, ... or any other of the (far too) many module workflows.
It seems like you could use babel-cli to do what you want. Perhaps something like babel src --out-dir lib.
According to http://www.slant.co/topics/1089/viewpoints/1/~what-are-the-best-client-side-javascript-module-loaders~browserify#9 one of the downside of using Browserify is that:
Not all javascript libraries have an npm version
While it's not too hard to create npm package for an existing library, it means maintaining it when the library updates. While most libraries are now on npm, many client side specific libraries are not.
I don't have any experience with npm aside from knowing how to install an existing module. In light of that, what is the easiest/best way to browserify with client-side non-npm libraries?
Is there a way for me to declare a local Javascript file as a dependency, instead of looking it up through npm?
You can use local modules without problems by two ways:
1.Use a relative path to a module in require:
var myModule = require('../js/my-module');
2.Use a module name, but before, you should to add it to browser property in package.json:
package.json:
...
browser: {
my-module: './js/my-module.js'
}
app.js:
var myModule = require('my-module');
Some packages are packages with bower, these can be used with browserify by using the debowerify plugin.
For non-versioned things you can copy them to a lib directory in your project or add them as a git submodule and then configure browserify so that it can find things there too.
I have an Angular app where I use browserify to manage my dependencies. I am also using momentjs to do all my time manipulation. I have several modules that I am using browserify to build, but it is pulling in momentjs more than once, even when I use the external command. Here is my code. First I have a base module that has all of my shared libs:
require('angular');
require('angular-route');
require('moment');
Here is the code I use to browserify in my gulpfile.js:
browserify().require('./js/donor/donor-libs.js')
.bundle()
.pipe(source('donor-libs.js'))
.pipe(gulp.dest('./build'));
This builds out fine and has the libs that I would expect including momentjs.
Now I go to build a module that is dependent on this module. momentjs is used in this module. Here is the code that I use to build the module:
browserify().require('./js/donor/history-module.js')
.external('./js/donor/donor-libs.js')
.bundle()
.pipe(source(filename))
.pipe(gulp.dest('./build'));
Now when I look in my build directory, I have momentjs in both the donor-libs.js and my history-module.js. Why doesn't it recognize that I have already required in momentjs in my donor-libs.js? What do I need to do to only require in 3rd party libs one time? What don't I understand about the external command?
The reason libs are being pulled in multiple times is that the external command is being used improperly. external is expecting a path or an array of paths that will externalized. external will not look through a js file and find the required files and then not pull them in other modules. The code should of looked something like this
.external('angular', 'angular-route', 'moment')
or the path to the required lib. This would of externalized these files and fixed the problem of a lib being pulled in multiple times.