Need some advice regarding module loaders / bundlers
Current situation:
- SPA, consisting of about 200 AMD modules
- some of them are 3rd party, so I cannot rewrite them
- own code already rewritten to ES2017, EXCEPT for ES6 module syntax (so still using AMD)
- using text plugin & dynamic "require()" calls
- 2 build versions: ES2017 as well as 1x ES5 for legacy browsers
- loaded via requireJS, bundled using r.js and compiled using closure compiler
- dev environment runs on standard apache
So of course this setup is getting a bit old, and I am looking for a way to modernize my build process. I want to finally move from AMD to ES6 modules, but I cannot rewrite every module at once, and I am not able to rewrite any 3rd party module, so I need a solution that supports both AMD style and new ES6 module style - maybe for quite some time.
And I want to retain the ability to directly work with the source code in development. I.e. right now, I make a change in the source and reload the browser, thats it. So I don't have any transpilation steps for development at the moment, my dev browsers just run the (unbundled) ES2017 code natively.
So I do NOT want to have a complete transpilation to ES5 while developing (I am fine with minimal transpilation in the browser itself, if it only deals with loader/module specific stuff), and I also do NOT want to have any bundling there as well, just take my original source files and load them in the browser with minimal overhead in between. And I do NOT want to have another special dev server, I have to run my project on Apache for several reasons.
Now, is there any tool at all fullfils my requirements? And if yes, which one(s)? As I am bit lost on all the various options I have (in theory), any help is greatly appreciated!
PS: for actual production builds, of course I want bundling, and also transpilation at least for the "legacy build", but as this should be a no brainer, I mainly concerned with my dev workflwo for now.
javascript module bundling-and-minification transpiler
add a comment |
Current situation:
- SPA, consisting of about 200 AMD modules
- some of them are 3rd party, so I cannot rewrite them
- own code already rewritten to ES2017, EXCEPT for ES6 module syntax (so still using AMD)
- using text plugin & dynamic "require()" calls
- 2 build versions: ES2017 as well as 1x ES5 for legacy browsers
- loaded via requireJS, bundled using r.js and compiled using closure compiler
- dev environment runs on standard apache
So of course this setup is getting a bit old, and I am looking for a way to modernize my build process. I want to finally move from AMD to ES6 modules, but I cannot rewrite every module at once, and I am not able to rewrite any 3rd party module, so I need a solution that supports both AMD style and new ES6 module style - maybe for quite some time.
And I want to retain the ability to directly work with the source code in development. I.e. right now, I make a change in the source and reload the browser, thats it. So I don't have any transpilation steps for development at the moment, my dev browsers just run the (unbundled) ES2017 code natively.
So I do NOT want to have a complete transpilation to ES5 while developing (I am fine with minimal transpilation in the browser itself, if it only deals with loader/module specific stuff), and I also do NOT want to have any bundling there as well, just take my original source files and load them in the browser with minimal overhead in between. And I do NOT want to have another special dev server, I have to run my project on Apache for several reasons.
Now, is there any tool at all fullfils my requirements? And if yes, which one(s)? As I am bit lost on all the various options I have (in theory), any help is greatly appreciated!
PS: for actual production builds, of course I want bundling, and also transpilation at least for the "legacy build", but as this should be a no brainer, I mainly concerned with my dev workflwo for now.
javascript module bundling-and-minification transpiler
add a comment |
Current situation:
- SPA, consisting of about 200 AMD modules
- some of them are 3rd party, so I cannot rewrite them
- own code already rewritten to ES2017, EXCEPT for ES6 module syntax (so still using AMD)
- using text plugin & dynamic "require()" calls
- 2 build versions: ES2017 as well as 1x ES5 for legacy browsers
- loaded via requireJS, bundled using r.js and compiled using closure compiler
- dev environment runs on standard apache
So of course this setup is getting a bit old, and I am looking for a way to modernize my build process. I want to finally move from AMD to ES6 modules, but I cannot rewrite every module at once, and I am not able to rewrite any 3rd party module, so I need a solution that supports both AMD style and new ES6 module style - maybe for quite some time.
And I want to retain the ability to directly work with the source code in development. I.e. right now, I make a change in the source and reload the browser, thats it. So I don't have any transpilation steps for development at the moment, my dev browsers just run the (unbundled) ES2017 code natively.
So I do NOT want to have a complete transpilation to ES5 while developing (I am fine with minimal transpilation in the browser itself, if it only deals with loader/module specific stuff), and I also do NOT want to have any bundling there as well, just take my original source files and load them in the browser with minimal overhead in between. And I do NOT want to have another special dev server, I have to run my project on Apache for several reasons.
Now, is there any tool at all fullfils my requirements? And if yes, which one(s)? As I am bit lost on all the various options I have (in theory), any help is greatly appreciated!
PS: for actual production builds, of course I want bundling, and also transpilation at least for the "legacy build", but as this should be a no brainer, I mainly concerned with my dev workflwo for now.
javascript module bundling-and-minification transpiler
Current situation:
- SPA, consisting of about 200 AMD modules
- some of them are 3rd party, so I cannot rewrite them
- own code already rewritten to ES2017, EXCEPT for ES6 module syntax (so still using AMD)
- using text plugin & dynamic "require()" calls
- 2 build versions: ES2017 as well as 1x ES5 for legacy browsers
- loaded via requireJS, bundled using r.js and compiled using closure compiler
- dev environment runs on standard apache
So of course this setup is getting a bit old, and I am looking for a way to modernize my build process. I want to finally move from AMD to ES6 modules, but I cannot rewrite every module at once, and I am not able to rewrite any 3rd party module, so I need a solution that supports both AMD style and new ES6 module style - maybe for quite some time.
And I want to retain the ability to directly work with the source code in development. I.e. right now, I make a change in the source and reload the browser, thats it. So I don't have any transpilation steps for development at the moment, my dev browsers just run the (unbundled) ES2017 code natively.
So I do NOT want to have a complete transpilation to ES5 while developing (I am fine with minimal transpilation in the browser itself, if it only deals with loader/module specific stuff), and I also do NOT want to have any bundling there as well, just take my original source files and load them in the browser with minimal overhead in between. And I do NOT want to have another special dev server, I have to run my project on Apache for several reasons.
Now, is there any tool at all fullfils my requirements? And if yes, which one(s)? As I am bit lost on all the various options I have (in theory), any help is greatly appreciated!
PS: for actual production builds, of course I want bundling, and also transpilation at least for the "legacy build", but as this should be a no brainer, I mainly concerned with my dev workflwo for now.
javascript module bundling-and-minification transpiler
javascript module bundling-and-minification transpiler
asked Nov 20 '18 at 19:04
frontend_devfrontend_dev
1,2191020
1,2191020
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399856%2fneed-some-advice-regarding-module-loaders-bundlers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399856%2fneed-some-advice-regarding-module-loaders-bundlers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown