Include jQuery datatables in webpack.ProvidePlugin on webpack

I am currently importing jQuery datatables on every javascript file I create.

import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-bs4/js/dataTables.bootstrap4';

$('#example').DataTable();

Is it possible to make it global that I'm not required to import it everytime? jQuery has this behavior and I'm able to access $ on every javascript without importing it.

In my environment.js, I currently have this:

const environment = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default']
));

module.exports = environment;

I believe that this is the file that loads packages globally. Is it possible to include datatables here?

So far I have tried this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net'
));

And this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net/js/jquery.dataTables'
));

But no luck. Do you know what the problem might be?

asked Nov 12 '18 at 1:56

David Angulo

635321

All you need is to define jQuery as external. Don't worry about DataTable. You're going to include jQuery on the page anyway, then just include DataTable after it. Pick what you need from the download page: datatables.net/download and include after jQuery on the page from external/cdn

– Noogen
Nov 13 '18 at 1:16

add a comment |

I am currently importing jQuery datatables on every javascript file I create.

import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-bs4/js/dataTables.bootstrap4';

$('#example').DataTable();

Is it possible to make it global that I'm not required to import it everytime? jQuery has this behavior and I'm able to access $ on every javascript without importing it.

In my environment.js, I currently have this:

const environment = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default']
));

module.exports = environment;

I believe that this is the file that loads packages globally. Is it possible to include datatables here?

So far I have tried this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net'
));

And this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net/js/jquery.dataTables'
));

But no luck. Do you know what the problem might be?

asked Nov 12 '18 at 1:56

David Angulo

635321

All you need is to define jQuery as external. Don't worry about DataTable. You're going to include jQuery on the page anyway, then just include DataTable after it. Pick what you need from the download page: datatables.net/download and include after jQuery on the page from external/cdn

– Noogen
Nov 13 '18 at 1:16

add a comment |

I am currently importing jQuery datatables on every javascript file I create.

import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-bs4/js/dataTables.bootstrap4';

$('#example').DataTable();

Is it possible to make it global that I'm not required to import it everytime? jQuery has this behavior and I'm able to access $ on every javascript without importing it.

In my environment.js, I currently have this:

const environment = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default']
));

module.exports = environment;

I believe that this is the file that loads packages globally. Is it possible to include datatables here?

So far I have tried this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net'
));

And this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net/js/jquery.dataTables'
));

But no luck. Do you know what the problem might be?

asked Nov 12 '18 at 1:56

David Angulo

635321

I am currently importing jQuery datatables on every javascript file I create.

import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-bs4/js/dataTables.bootstrap4';

$('#example').DataTable();

Is it possible to make it global that I'm not required to import it everytime? jQuery has this behavior and I'm able to access $ on every javascript without importing it.

In my environment.js, I currently have this:

const environment = require('@rails/webpacker');

const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default']
));

module.exports = environment;

I believe that this is the file that loads packages globally. Is it possible to include datatables here?

So far I have tried this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net'
));

And this:

environment.plugins.append('Provide', new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 Popper: ['popper.js', 'default'],
 DataTable: 'datatables.net/js/jquery.dataTables'
));

But no luck. Do you know what the problem might be?

javascript jquery webpack datatables

asked Nov 12 '18 at 1:56

David Angulo

635321

asked Nov 12 '18 at 1:56

David Angulo

635321

asked Nov 12 '18 at 1:56

David Angulo

635321

asked Nov 12 '18 at 1:56

David Angulo

635321

asked Nov 12 '18 at 1:56

David Angulo

635321

All you need is to define jQuery as external. Don't worry about DataTable. You're going to include jQuery on the page anyway, then just include DataTable after it. Pick what you need from the download page: datatables.net/download and include after jQuery on the page from external/cdn

– Noogen
Nov 13 '18 at 1:16

add a comment |

All you need is to define jQuery as external. Don't worry about DataTable. You're going to include jQuery on the page anyway, then just include DataTable after it. Pick what you need from the download page: datatables.net/download and include after jQuery on the page from external/cdn

– Noogen
Nov 13 '18 at 1:16

All you need is to define jQuery as external. Don't worry about DataTable. You're going to include jQuery on the page anyway, then just include DataTable after it. Pick what you need from the download page: datatables.net/download and include after jQuery on the page from external/cdn

– Noogen
Nov 13 '18 at 1:16

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
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53255101%2finclude-jquery-datatables-in-webpack-provideplugin-on-webpack%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

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.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfyjkt