WebPacker - Load NPM modules via ES6 Import vs webpack.ProvidePlugin()
I am experimenting with running multiple WebApps inside of Rails.
Each WebApp has totally different dependencies and I would like to keep the bundle sizes of each to minimum size.
The first app I am building uses Reveal.js and I have added it using yarn add reveal
I had thought I could include it by importing via packs/presentation.js
console.log('Presentation System');
import 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I then tried a slight variation import { Reveal } from 'reveal';
console.log('Presentation System');
import { Reveal } from 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I finally got Reveal.js to work by altering the WebPacker config in side rails
config/webpack/environment.js
I added in jQuery and Reveal.js as webpack plugins by using the following code
I am unsure whether this is the best way to include reveal as it seems like it would effect all my apps by adding jQuery and Reveal to each app which is not what I want as the other apps are using VUE or Angular
// https://joey.io/how-to-use-jquery-in-rails-5-2-using-webpack/
const { environment } = require('@rails/webpacker');
const typescript = require('./loaders/typescript');
const vue = require('./loaders/vue');
const webpack = require('webpack')
environment.loaders.append('vue', vue);
environment.loaders.append('typescript', typescript);
module.exports = environment;
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Reveal: 'reveal'
})
);
And the code that I now run to display the presentation
$(document).ready(function() {
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
});
javascript webpack webpacker ruby-on-rails-5.2
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
add a comment |
I am experimenting with running multiple WebApps inside of Rails.
Each WebApp has totally different dependencies and I would like to keep the bundle sizes of each to minimum size.
The first app I am building uses Reveal.js and I have added it using yarn add reveal
I had thought I could include it by importing via packs/presentation.js
console.log('Presentation System');
import 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I then tried a slight variation import { Reveal } from 'reveal';
console.log('Presentation System');
import { Reveal } from 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I finally got Reveal.js to work by altering the WebPacker config in side rails
config/webpack/environment.js
I added in jQuery and Reveal.js as webpack plugins by using the following code
I am unsure whether this is the best way to include reveal as it seems like it would effect all my apps by adding jQuery and Reveal to each app which is not what I want as the other apps are using VUE or Angular
// https://joey.io/how-to-use-jquery-in-rails-5-2-using-webpack/
const { environment } = require('@rails/webpacker');
const typescript = require('./loaders/typescript');
const vue = require('./loaders/vue');
const webpack = require('webpack')
environment.loaders.append('vue', vue);
environment.loaders.append('typescript', typescript);
module.exports = environment;
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Reveal: 'reveal'
})
);
And the code that I now run to display the presentation
$(document).ready(function() {
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
});
javascript webpack webpacker ruby-on-rails-5.2
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
add a comment |
I am experimenting with running multiple WebApps inside of Rails.
Each WebApp has totally different dependencies and I would like to keep the bundle sizes of each to minimum size.
The first app I am building uses Reveal.js and I have added it using yarn add reveal
I had thought I could include it by importing via packs/presentation.js
console.log('Presentation System');
import 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I then tried a slight variation import { Reveal } from 'reveal';
console.log('Presentation System');
import { Reveal } from 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I finally got Reveal.js to work by altering the WebPacker config in side rails
config/webpack/environment.js
I added in jQuery and Reveal.js as webpack plugins by using the following code
I am unsure whether this is the best way to include reveal as it seems like it would effect all my apps by adding jQuery and Reveal to each app which is not what I want as the other apps are using VUE or Angular
// https://joey.io/how-to-use-jquery-in-rails-5-2-using-webpack/
const { environment } = require('@rails/webpacker');
const typescript = require('./loaders/typescript');
const vue = require('./loaders/vue');
const webpack = require('webpack')
environment.loaders.append('vue', vue);
environment.loaders.append('typescript', typescript);
module.exports = environment;
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Reveal: 'reveal'
})
);
And the code that I now run to display the presentation
$(document).ready(function() {
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
});
javascript webpack webpacker ruby-on-rails-5.2
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
I am experimenting with running multiple WebApps inside of Rails.
Each WebApp has totally different dependencies and I would like to keep the bundle sizes of each to minimum size.
The first app I am building uses Reveal.js and I have added it using yarn add reveal
I had thought I could include it by importing via packs/presentation.js
console.log('Presentation System');
import 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I then tried a slight variation import { Reveal } from 'reveal';
console.log('Presentation System');
import { Reveal } from 'reveal';
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
I finally got Reveal.js to work by altering the WebPacker config in side rails
config/webpack/environment.js
I added in jQuery and Reveal.js as webpack plugins by using the following code
I am unsure whether this is the best way to include reveal as it seems like it would effect all my apps by adding jQuery and Reveal to each app which is not what I want as the other apps are using VUE or Angular
// https://joey.io/how-to-use-jquery-in-rails-5-2-using-webpack/
const { environment } = require('@rails/webpacker');
const typescript = require('./loaders/typescript');
const vue = require('./loaders/vue');
const webpack = require('webpack')
environment.loaders.append('vue', vue);
environment.loaders.append('typescript', typescript);
module.exports = environment;
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
Reveal: 'reveal'
})
);
And the code that I now run to display the presentation
$(document).ready(function() {
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'none',
});
});
javascript webpack webpacker ruby-on-rails-5.2
javascript webpack webpacker ruby-on-rails-5.2
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
asked Nov 22 '18 at 23:34
David CruwysDavid Cruwys
2,11352554
2,11352554
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
What about import Reveal from 'reveal' ?
https://babeljs.io/docs/en/learn/#modules
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
By doing import { Reveal } from 'reveal' you are trying to import a Reveal named export of the Reveal module.
But Reveal is the default export.
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
add a comment |
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%2f53439087%2fwebpacker-load-npm-modules-via-es6-import-vs-webpack-provideplugin%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What about import Reveal from 'reveal' ?
https://babeljs.io/docs/en/learn/#modules
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
By doing import { Reveal } from 'reveal' you are trying to import a Reveal named export of the Reveal module.
But Reveal is the default export.
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
add a comment |
What about import Reveal from 'reveal' ?
https://babeljs.io/docs/en/learn/#modules
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
By doing import { Reveal } from 'reveal' you are trying to import a Reveal named export of the Reveal module.
But Reveal is the default export.
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
add a comment |
What about import Reveal from 'reveal' ?
https://babeljs.io/docs/en/learn/#modules
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
By doing import { Reveal } from 'reveal' you are trying to import a Reveal named export of the Reveal module.
But Reveal is the default export.
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
What about import Reveal from 'reveal' ?
https://babeljs.io/docs/en/learn/#modules
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
By doing import { Reveal } from 'reveal' you are trying to import a Reveal named export of the Reveal module.
But Reveal is the default export.
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
edited Nov 23 '18 at 0:27
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
answered Nov 23 '18 at 0:21
BlitzBlitz
11115
11115
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
add a comment |
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
I am sure I tried that, but I will check soon, thanks for the reply
– David Cruwys
Nov 23 '18 at 3:13
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
Thanks that worked, time to do some es6 tutorials I think
– David Cruwys
Nov 23 '18 at 5:27
add a comment |
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%2f53439087%2fwebpacker-load-npm-modules-via-es6-import-vs-webpack-provideplugin%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
