1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: MBD Pro jQuery 4.12.0 Module Entry JS File for Webpack

dlakhter free asked 4 years ago

Expected behavior

The git repository should have an entry point js file that imports all of the modules under /src/js to be able to build using Webpack.

Actual behavior

There is a /src/js directory with individual scripts and an obfuscated (webpack built) /js/mdb.js. The Gulp downloadable version provides a /js/modules.js file but since the directory structure in that project is different it's not really usable. Can you provide a /js/modules.js with imports in Git that can be used with webpack (or any other packager)?

dlakhter free answered 4 years ago

I think I got it to work without any obvious build/run time errors. Everything may not work though. I'm not using most of these scripts.

Webpack entry point adapted from gulp version for git version:

import 'mdbootstrap-pro/src/js/vendor/free/jquery.easing';
import 'mdbootstrap-pro/src/js/vendor/free/velocity';
import 'mdbootstrap-pro/src/js/vendor/free/chart';
import 'mdbootstrap-pro/src/js/vendor/free/chartjs-datalabels';
import 'mdbootstrap-pro/src/js/free/wow';
import 'mdbootstrap-pro/src/js/free/scrolling-navbar';
import 'mdbootstrap-pro/src/js/vendor/free/waves';
import 'mdbootstrap-pro/src/js/free/forms-free';
import 'mdbootstrap-pro/src/js/pro/preloading';
import 'mdbootstrap-pro/src/js/pro/cards';
import 'mdbootstrap-pro/src/js/pro/character-counter';
import 'mdbootstrap-pro/src/js/vendor/pro/toastr';
import 'mdbootstrap-pro/src/js/pro/smooth-scroll';
import 'mdbootstrap-pro/src/js/pro/buttons';
import 'mdbootstrap-pro/src/js/pro/sidenav';
import 'mdbootstrap-pro/src/js/pro/collapsible';
import 'mdbootstrap-pro/src/js/pro/range-input';
import 'mdbootstrap-pro/src/js/pro/file-input';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown-searchable';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view-renderer';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select';
import 'mdbootstrap-pro/src/js/vendor/pro/picker';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-date';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-time';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-date-time';
import 'mdbootstrap-pro/src/js/vendor/pro/lightbox';
import 'mdbootstrap-pro/src/js/vendor/pro/scrollbar';
import 'mdbootstrap-pro/src/js/pro/chips';
import 'mdbootstrap-pro/src/js/vendor/pro/ofi';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax-video';
import 'mdbootstrap-pro/src/js/pro/mdb-autocomplete';
import 'mdbootstrap-pro/src/js/vendor/free/enhanced-modals';
import 'mdbootstrap-pro/src/js/free/treeview';
import 'mdbootstrap-pro/src/js/vendor/free/bs-custom-file-input';
import 'mdbootstrap-pro/src/js/pro/sticky';

// import 'mdbootstrap-pro/src/js/vendor/addons/jquery.zmd.hierarchical-display';
// import 'mdbootstrap-pro/src/js/vendor/addons/masonry.pkgd.min';
// import 'mdbootstrap-pro/src/js/vendor/addons/imagesloaded.pkgd.min';
// import 'mdbootstrap-pro/src/js/vendor/addons/datatables';
// import 'mdbootstrap-pro/src/js/vendor/addons/rating';
//progressBar is missing ???
// import 'mdbootstrap-pro/src/js/vendor/addons/progressBar';
// import 'mdbootstrap-pro/src/js/vendor/addons-pro/timeline';
// import 'mdbootstrap-pro/src/js/vendor/addons-pro/steppers';
// import 'mdbootstrap-pro/src/js/vendor/addons-pro/multi-range';
// import 'mdbootstrap-pro/src/js/vendor/addons-pro/chat';
// import 'mdbootstrap-pro/src/js/vendor/addons-pro/simple-charts'

Also had to add the following to my webpack config to run it through babel as some files are using ES6. I shim for IE11, which may or may not be evil:

            {
                test: /\.js$/,
                exclude: {
                    test: path.resolve(__dirname, 'node_modules'),
                    exclude: [
                        //force transpile of MDB even though it's in node_modules
                        path.resolve(__dirname, 'node_modules/mdbootstrap-pro'),
                    ],
                },
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', {
                                    useBuiltIns: 'usage',
                                    corejs: 3,
                                    debug: true,
                                }],
                            ],
                        },
                    },
                    'eslint-loader',
                ],
            },
    /////////////////////////////////////////////////
    //without this jQuery won't resolve in many files
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.$': 'jquery',
            'window.jQuery': 'jquery',
        }),

Mateusz Łubianka staff commented 4 years ago

Thank you very much, I'll include it in the task on Ideas List.

Best,

Mateusz Łubianka staff answered 4 years ago

Hi @dlakhter,

I created a task with it on our ideas list. Our team will consider this idea. Thank you very much for your opinion.

Best,

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.12.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
webpack source-code modules
About author
dlakhter
20Support score
1Questions 1Answers 0Snippets