3 ms·

The module system shimming is kind of roundabout. 6to5 generates CommonJS, RequireJS converts CommonJS to AMD, and AMDclean converts that to "regular" JS. Requ

The module system shimming is kind of roundabout. 6to5 generates CommonJS, RequireJS converts CommonJS to AMD, and AMDclean converts that to "regular" JS. RequireJS is really only good for AMD, but since AMD is rightfully dying in favor of CommonJS, I would use Webpack instead. There is some overhead compared to the AMDclean-ed version since it shims require(), though.

lobster_johnson 12y ago
Yes, I don't see the point of using RequireJS/AMD these days. We use Browserify, which is excellent, and allows you to partition your code into any number of bundles as required; it's a great match for ES6 modules. I hear Webpack is pretty good, too.
- wldcordeiro 12y ago
  Browserify gets my vote as well. I'm using it in a project currently and barely learned how to use it when I was starting the project. It's got clear documentation and works very well.
rich_harris 12y ago
There's also Esperanto (http://www.rich-harris.co.uk/esperanto/ http://www.rich-harris.co.uk/esperanto/ - disclaimer, I wrote it). It supports bundling and one-to-one transformations, and the bundled output is even slimmer than AMDClean
- gianlucaguarini 12y ago
  I didn't know Esperanto.I will test it an if it produces a better output I'd be happy to replace requirejs + amdclean with it
gianlucaguarini 12y ago
Thanks 4 your feedback, the reason why I am using the requrejs + amdclean is that the other tools I've found like browserify add extra code to keep using the require calls and I would like to avoid it. If there is a better solution I'd really appreciate a pull request
- lobster_johnson 12y ago
  Browserify's "runtime" is about 440 bytes. For example, consider: // hello.js module.exports.hello = function() { console.log("hello"); } // test.js var h = require('./hello'); h.hello(); The result of browserifying this is: (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ module.exports.hello = function() { console.log("hello"); } },{}],2:[function(require,module,exports){ var h = require('./hello'); h.hello(); },{"./hello":1}]},{},[2]); It's pretty damn compact. Sure, every module is wrapped with the signature "function(require, module, exports)", but a good minifier such as Google Closure will reduce that by a lot: (function e$$0(d,b,f){function g(c,e){if(!b[c]){if(!d[c]){var a="function"==typeof require&&require;if(!e&&a)return a(c,!0);if(h)return h(c,!0);a=Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a;}a=b[c]={exports:{}};d[c][0].call(a.exports,function(a){var b=d[c][1][a];return g(b?b:a)},a,a.exports,e$$0,d,b,f)}return b[c].exports}for(var h="function"==typeof require&&require,e=0;e<f.length;e++)g(f[e]);return g})({1:[function(k,d,b){d.exports.hello=function(){console.log("hello")}}, {}],2:[function(k,d,b){k("./hello").hello()},{"./hello":1}]},{},[2]); I don't see what you win by going with RequireJS/AMD.
  - gianlucaguarini 12y ago
    My es6 project starter kit works in any kind of environment without damaging anyone: it provides also the dist/cmj folder for the browserify users or whatever other tool you use to load commonjs code. The reason why I don't want to compile directly using browserify is that its require shim even if it's small, it will be then included in any single script you are going to use in your app, imagine the following use case: in your app you want to use a.js build with browserify and b.js build with it as well. Now including a.js and b.js in your page you will have 2 times the browserify shim (btw it could be also different depending on the browserify version you have used to compile). But if I provide a distribution folder containing the script cleaned up (without extra code) and the commonjs version of it's a win for everyone.

lobster_johnson 12y ago

Yes, I don't see the point of using RequireJS/AMD these days. We use Browserify, which is excellent, and allows you to partition your code into any number of bundles as required; it's a great match for ES6 modules. I hear Webpack is pretty good, too.

wldcordeiro 12y ago
Browserify gets my vote as well. I'm using it in a project currently and barely learned how to use it when I was starting the project. It's got clear documentation and works very well.

rich_harris 12y ago

There's also Esperanto (http://www.rich-harris.co.uk/esperanto/ http://www.rich-harris.co.uk/esperanto/ - disclaimer, I wrote it). It supports bundling and one-to-one transformations, and the bundled output is even slimmer than AMDClean

gianlucaguarini 12y ago
I didn't know Esperanto.I will test it an if it produces a better output I'd be happy to replace requirejs + amdclean with it

gianlucaguarini 12y ago

Thanks 4 your feedback, the reason why I am using the requrejs + amdclean is that the other tools I've found like browserify add extra code to keep using the require calls and I would like to avoid it. If there is a better solution I'd really appreciate a pull request

lobster_johnson 12y ago
Browserify's "runtime" is about 440 bytes. For example, consider: // hello.js module.exports.hello = function() { console.log("hello"); } // test.js var h = require('./hello'); h.hello(); The result of browserifying this is: (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ module.exports.hello = function() { console.log("hello"); } },{}],2:[function(require,module,exports){ var h = require('./hello'); h.hello(); },{"./hello":1}]},{},[2]); It's pretty damn compact. Sure, every module is wrapped with the signature "function(require, module, exports)", but a good minifier such as Google Closure will reduce that by a lot: (function e$$0(d,b,f){function g(c,e){if(!b[c]){if(!d[c]){var a="function"==typeof require&&require;if(!e&&a)return a(c,!0);if(h)return h(c,!0);a=Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a;}a=b[c]={exports:{}};d[c][0].call(a.exports,function(a){var b=d[c][1][a];return g(b?b:a)},a,a.exports,e$$0,d,b,f)}return b[c].exports}for(var h="function"==typeof require&&require,e=0;e<f.length;e++)g(f[e]);return g})({1:[function(k,d,b){d.exports.hello=function(){console.log("hello")}}, {}],2:[function(k,d,b){k("./hello").hello()},{"./hello":1}]},{},[2]); I don't see what you win by going with RequireJS/AMD.
- gianlucaguarini 12y ago
  My es6 project starter kit works in any kind of environment without damaging anyone: it provides also the dist/cmj folder for the browserify users or whatever other tool you use to load commonjs code. The reason why I don't want to compile directly using browserify is that its require shim even if it's small, it will be then included in any single script you are going to use in your app, imagine the following use case: in your app you want to use a.js build with browserify and b.js build with it as well. Now including a.js and b.js in your page you will have 2 times the browserify shim (btw it could be also different depending on the browserify version you have used to compile). But if I provide a distribution folder containing the script cleaned up (without extra code) and the commonjs version of it's a win for everyone.