twitter-bootstrap - 如何通过 webpack 2 从 bootstrap 4 中仅导入一个组件

Question

我正在使用 Webpack 2 和 Bootstrap 4。我只想使用整个包中的一个 Modal 组件。

可能吗？我尝试从 js/dist/modal 导入它，但出现异常:无法在 Bootstrap 中解析导出

目前我提供了类似 vendor 依赖的 Bootstrap ，但我的 vendor 文件太大(350 kb)。我只想捆绑我正在使用的那个组件。

这是我的 webpack.common.js

let process = require("process"),
    path = require("path"),
    webpack = require("webpack"),
    helpers = require("./helpers"),
    glob = require("glob"),

    poststylus = require('poststylus'),

    HtmlWebpackPlugin = require("html-webpack-plugin"),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    CopyWebpackPlugin = require("copy-webpack-plugin"),

    SpritesmithPlugin = require('webpack-spritesmith'),

    srcName = "src";

const getEntry = () => {
    let res = [
        helpers.root(srcName, "index.js")
    ];

    if (process.env.NODE_ENV === "development") {
        res = [
            'react-hot-loader/patch',
            'webpack-dev-server/client?http://localhost:5000',
            'webpack/hot/only-dev-server'
        ].concat(res);
    }

    return res;
};

const getStylLoader = () => {
    let res = {
        test: /\.styl$/,
        exclude: /node_modules/,
        loader: "style-loader!css-loader?modules=false!stylus-loader"
    };

    if (process.env.NODE_ENV === "production") {
        res = Object.assign({}, res, {loader: ExtractTextPlugin.extract({
                                                                                    fallbackLoader: "style-loader",
                                                                                    loader: "css-loader?modules=false&minimize=true!stylus-loader"
                                                                                })
        })
    }

    return res;

};


module.exports = {
    entry : {
        "vendor" : ["react", "react-dom", "react-router", "redux", "react-router-redux", "jquery", "bootstrap/dist/js/bootstrap.min.js"],
        "app" : getEntry()
    },

    context : helpers.root(srcName),

    resolve : {

        modules : [
            "web_modules",
            "node_modules",
            "spritesmith-generated",
            helpers.root(srcName)
        ],

        extensions: ['.js', '.styl', '.css']

    },

    module : {
        rules : [
            {
                enforce : 'pre',
                test : /\.jsx?$/,
                loader : 'eslint-loader',
                options : {
                    fix : true,
                },
                include : helpers.root(srcName),
                exclude: helpers.root(srcName, "routes.js")
            },
            {
                test : /\.jsx?$/,
                loaders : [
                    'babel-loader',
                ],
                include: [ helpers.root(srcName), "node_modules/bootstrap"],
                exclude : /node_modules/
            },
            {
                test : /\.css$/,
                loaders : [
                    'style-loader',
                    'css-loader?modules=true&minimize=true',
                ],
            },
            getStylLoader(),
            {test: /\.png$/, loaders: [
                'file-loader?name=i/[hash].[ext]'
            ]},
            {
                test: /\.svg$/,
                loader: 'babel-loader!svg-react-loader'
            }
        ],
    },
    plugins : [


        new webpack.ProvidePlugin({
            jQuery : "jquery",
            $ : "jquery",
            jquery : "jquery",
            Tether: "tether",
            "window.Tether": "tether",
            Alert: "exports?Alert!bootstrap/js/dist/alert",
            Button: "exports?Button!bootstrap/js/dist/button",
            Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
            Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
            Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
            Modal: "exports?Modal!bootstrap/js/dist/modal",
            Popover: "exports?Popover!bootstrap/js/dist/popover",
            Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
            Tab: "exports?Tab!bootstrap/js/dist/tab",
            Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
            Util: "exports?Util!bootstrap/js/dist/util"
        }),

        new webpack.LoaderOptionsPlugin({
            options : {
                context: helpers.root(srcName),
                output: { path :  "./" },

                stylus: {
                    use: [poststylus([ 'autoprefixer' ])]
                },

                eslint : {
                    configFile : '.eslintrc',
                    failOnWarning : false,
                    failOnError : false
                }
            }
        }),



        new SpritesmithPlugin({
            src: {
                cwd: helpers.root(srcName, "assets/images/icons"),
                glob: '*.png'
            },
            target: {
                image: helpers.root(srcName, "assets/images/spritesmith_generated/sprite.png"),
                css: helpers.root(srcName, 'assets/images/spritesmith_generated/sprite.styl')
            },
            apiOptions: {
                cssImageRef: "../images/spritesmith_generated/sprite.png"
            }
        })

    ],


};

这就是我尝试使用它的方式
App.component.js

const a = require("bootstrap/js/dist/modal");

console.log(a); //I want to pass some jquery element later for Modal and handle it if the exported function will be exist

Answer 1

在这个阶段，似乎不支持 Javascript 模块。不过，此问题似乎正在跟踪该问题:

https://github.com/twbs/bootstrap/issues/19017