MBD Pro jQuery 4.12.0 Module Entry JS File for Webpack

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

dlakhter asked 5 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)?

Add comment

dlakhter answered 5 years ago

0 0 Best answer

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 5 years ago

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

Best,

Add comment

Mateusz Łubianka staff answered 5 years ago