MBD Pro jQuery 4.12.0 Module Entry JS File for Webpack

web
mobile

Topic: MBD Pro jQuery 4.12.0 Module Entry JS File for Webpack

dlakhter pro asked 2 months 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 pro answered 2 months 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 2 months ago

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

Best,


Mateusz Łubianka staff answered 2 months 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,


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.12.0
  • Device: PC
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No