Javascript 如何正确安装reactjs npm软件包

嗨，我想安装这个名为react dropdown input的reactjs包

我执行了这个命令

$npm install react-dropdown-input --save 

在git bash的本地文件夹中。之后，我检查了我的package.json，它显示

“react dropdown input”：“^0.1.11”

，这意味着我已经正确安装了它

然后我尝试在我的js文件中使用它

    import React from 'react'
    import PropTypes from 'prop-types';

    var DocumentTitle = require('react-document-title');
    //var DropdownInput = require('react-dropdown-input'); 

当我添加第五行时，我的页面无法再加载（空白页面） 我不知道如何解决这个问题

这是我的webpack.config.js

  process.env.NODE_ENV = process.env.NODE_ENV || 'development';

  const path = require('path');
const webpack = require('webpack');
const BaseFolder = 'static/'; //relative to html path
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLess = new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
    disable: process.env.NODE_ENV === 'development'
});

var loaders = ['babel-loader'];
var port = process.env.PORT || 3000;
var vendor = ['react', 'react-dom', 'react-router', 'whatwg-fetch', 'es6-promise'];
var outputDir = 'dist';
var entry = {
     filename: path.resolve(__dirname, 'src/app.js'),
}
var plugins = [
    new webpack.optimize.CommonsChunkPlugin({
        name:'vendor',
        minChunks: Infinity,
        filename: BaseFolder + 'js/[name].js',
}),
new HtmlWebpackPlugin({
    template: path.join(__dirname, '/src/index.html'),
    filename: 'index.html',
    inject: 'body'
}),
new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'BaseFolder': JSON.stringify(BaseFolder)
}),
//new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
extractLess,
new webpack.ProvidePlugin({
    Promise: 'es6-promise',
    fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
    React: 'react',
    jsSHA: 'jssha',
    wx: 'weixin-js-sdk'
}),
new CopyWebpackPlugin([
    {
        from: 'src/images',
        to: BaseFolder + 'images'
    }
])
];

if (process.env.NODE_ENV === 'development') {
    //devtool ='eval-source-map';
    loaders = ['react-hot-loader'].concat(loaders);
    plugins = plugins.concat([
        new webpack.HotModuleReplacementPlugin()
    ]);
    entry = Object.keys(entry).reduce(function (result, key) {
        result[key] = [
        'webpack-dev-server/client?http://0.0.0.0:' + port,
        'webpack/hot/only-dev-server',
        entry[key]
    ];
    return result;
}, {});
}

 entry.vendor = vendor;

module.exports = env => {
return {
    entry: entry,
    output: {
        filename: BaseFolder+'js/bundle.js',

        chunkFilename: BaseFolder+'js/[id].chunk.js',
        path: path.resolve(__dirname, outputDir),
        publicPath: '/'
    },
    externals: [

    ],
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: loaders,
                exclude: /node_modules/,
                include: __dirname
            },
            { test: /\.js$/, exclude: /node_modules/, loaders: loaders, include: __dirname},
            { test: /\.scss$/, exclude: /node_modules/, loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&includePaths[]=node_modules/compass-mixins/lib'},
            { test: /\.css$/, loader: 'style-loader!css-loader', exclude: /\.useable\.css$/},
            {
                test: /\.useable\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable'
                    },
                    { loader: 'css-loader' },
                ],
            },
            { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=100000&name='+BaseFolder+'images/[name].[ext]' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?name='+BaseFolder+'fonts/[name].[ext]' },
            { test: /\.(woff|woff2)$/, loader:'url-loader?prefix=font/&limit=5000&name='+BaseFolder+'fonts/[name].[ext]' },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name='+BaseFolder+'fonts/[name].[ext]' },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml&name='+BaseFolder+'images/[name].[ext]' },


        ]
    },

    plugins: plugins
}
};

---

是的，这必须包含在您的节点_模块中，但关键是您是否已将其包含在编译的js文件中，即

---

您必须使用webpack或gulp来编译js的所有依赖项以生成一个文件，并且您必须忘记在webpack文件或gulpfile中包含该依赖项文件，请检查或提供您的网页包或gulpfile的示例。

我认为

DropdownInput

名为导出自

react dropdown input

，因为在存储库的index.js文件中，它导出为

module.exports = DropdownInput;

所以需要像导入一样导入它

import {DropdownInput} from 'react-dropdown-input'

---

该页面是否有任何错误记录到浏览器控制台？您是否将其与Webpack捆绑，并具有正确的加载程序？因为“require”在浏览器中不是有效的JS，所以需要将其传输到vanilla JS:）@dogui No。我刷新页面后，它就变成了空白。我正在本地主机上测试它：3000你用什么设置你的React应用程序？是

create react app

还是定制解决方案？在任何情况下，请尝试从“react dropdown input”导入dropdown input。@cbll文档标题包工作正常，因此我认为这可能不是因为这个原因？不工作：（刷新后页面变为空白）你在使用webpack吗