javascript - 如何正确安装reactjs npm包

Question

嗨，我想安装这个名为react-dropdown-input的reactjs包 https://github.com/RacingTadpole/react-dropdown-input/

我运行了这个命令

$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
}
};

Answer 1

是的，这必须包含在您的node_modules中，但关键是您是否将其包含在编译的js文件中，即

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