I using requirejs to manage the javascript files in my project. However, there are some external libraries I want to use that do not adhere to the AMD format. A library I want to include is barba.js. How would this be done using the package loading feature of requirejs? Ideally I want to include a commonjs module without running a conversion tool.
Barba doesn't use the CommonJS module format.
Barba uses the UMD (Universal Module Definition) module format. This means that it is compatible with both the AMD module loading (as used by RequireJS) and CommonJS module loading (as used by Node.js).
So, that means you can just include Barba - or any other module in UMD format - with RequireJS the same way you include an AMD module:
define([
"barba/barba"
], function(Barba) {
Barba.Pjax.start(); // You can use Barba here
});
From requireJS doc.
define(function(require, exports, module) {
//Put traditional CommonJS module content here
});
This should make everything alright for you. I'm really not sure if it's needed though.
Related
I've been modernizing some old gulp config where js files are concatenated and then minified by migrating to webpack.
Some of bundles contained libraries such as moment.js and isotope-docs.min.js,
When bundling with webpack I would get error that specific file or path is not found.
For example looking at moment.js
There is require("./locale/"+t) which causes my webpack to fail since i dont have locale directory.
Why would bundled js file have require function when browsers dont understand that?
Before ES modules became a thing, JavaScript did not have an official module syntax. Also, developers wanted to write a library once for both Node.js and the browser. The closest thing available was Node.js's require(), which does not exist on the browser.
So what tools like Browserify and Rollup would do is polyfill an implementation of require() (e.g. wrap the code in a "UMD"). This way, the module worked on any plaform and require() calls work as if in Node.js (its implementation may vary and can be extended because dealing with the filesystem is very different from dealing with a network).
Found a fix, you can just add to webpack confing under module noParse e.g
webpack.config.js
module: {
rules: [ ... ]
noParse: /moment.min.js|isotope-docs.min.js/
}
I understand that Svelte can produce AMD output and find some details on how to do this in the docs. I can also find some info on how to configure Rollup to output AMD modules. But what about input? What do I need to do when I have AMD modules as dependencies?
For example, suppose I have two different third party libraries that are both distributed as AMD libraries and I want to use those libraries in my Svelte project. How would I need to modify eg. this nested components demo to allow these AMD modules to be used as dependencies in my Svelte components?
Also, am I able to configure whether I bundle these libraries together with my Svelte components? If so, where would I need to do that?
Note
I also raised this issue on Github.
AMD modules are a pain to convert to ES modules, so you may find it difficult to bundle them with Rollup. (There's rollup-plugin-amd but it comes with caveats.)
But you can easily treat them as external dependencies that get loaded separately — just import them as normal then configure Rollup:
// rollup.config.js
export default {
// ...
format: 'amd',
external: ['an-external-amd-module'],
paths: {
'an-external-amd-module': 'https://my-cdn.com/an-external-amd-module.js'
}
};
You can see a demo here (repo here) — note that we're loading an exernal AMD module called the-answer, even though it's a regular import, because of the Rollup config.
I'm using Webpack 1 for a frontend project and I have a legacy internal Javascript library which uses its own module system similar to AMD. A module is defined with a code similar to this:
MyLib.define('module id', ['my', 'module', 'deps'], function (my, module, deps) { /* module code */});
Then you can use the modules with a code like this:
MyLib.require(['dep1', 'dep2'], function (dep1, dep2) {});
I would like to be able to use MyLib along with all the other CommonJS modules I'm already using. Can webpack support this somehow?
As far as I know, Webpack doesn't support custom module formats (if someone else knows otherwise, I'd love to be proven wrong, though).
You perhaps could work around this by writing a Webpack loader or a Babel plugin that converts the syntax to one of the module formats that Webpack supports. The latter is what Babel used to do for ES6 imports before Webpack supported them out of the box - it'd just transform them into CommonJS require calls.
If I use imports-loader, what does it mean exports=>false part in configuration? It should inject variable var exports = false, but I don't know when and why I need this variable.
module : {
loaders : [
{
test : /eonasdan-bootstrap-datetimepicker/,
loader : 'imports?define=>false,exports=>false,moment=moment'
}]
}
Imports is for shimming third party code that is expecting global to be defined such as jQuery $ or AMD's define. The reason you might want to do this is because module bundlers often bundle to formats that both AMD and CommonJS understand aka universal module definition UMD format. When importing a UMD module it will first check to see if define (AMD) exists and then exports (CommonJS). Webpack has an easier time parsing CommonJS (nodes native format) so setting define to false explicitly tells webpack to not parse it as an AMD module.
UPDATE
It seems like they are likely disabling all module exports and defining moment as the moment js library. I would guess that the code in that library is extending the bootstrap datepicker control with features from moment.
I'm trying to migrate my project to ES6 modules, but I met an issue.
I have 3rd party script that use modules with help of requirejs. Let name it 3rdParty.js. It was obtained via bower, so there is no ability and wish to update it.
Is there any way to import 3rdParty.js, using ES6 syntax without removing define functions from file?
SystemJS can load es6 modules and AMD or CommonJS together.
It has format detector, so you can just import module via System.import, and then library takes care about module formats