如何安装reactjs NPM包正确

您好我想安装此reactjs包叫做反应，下拉菜单输入 https://github.com/RacingTadpole/react-dropdown-input/如何安装reactjs NPM包正确

我在git的bash的我的本地文件夹运行此命令

$npm install react-dropdown-input --save

。之后，我检查了我的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 
} 
};

来源

2017-06-19 Dorinaaaa

页面是否有任何错误记录到浏览器控制台？ – glhrmv

您是否将其与Webpack捆绑在一起并拥有合适的装载机？因为“require”在浏览器中不是有效的JS，所以需要将其转换为vanilla js :) – cbll

@dogui号在我刷新页面后它刚刚变为空白。我在本地主机上测试它：3000 – Dorinaaaa

是的，这必须包含在你的node_modules，但问题是，你已经包括在你编译js文件与否，即

你必须使用webpack或gulp编译js的所有依赖关系才能提供一个文件，并且您必须忘记在webpack文件或gulpfile中包含该依赖文件。请检查或提供您的webpack或gulp文件的示例。

来源

2017-06-19 08:32:59

我认为DropdownInput在index.js文件存储库中的命名来自react-dropdown-input出口自其导出为

module.exports = DropdownInput;

所以需要导入它像

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

来源

2017-06-19 08:35:05

没有工作:(页面空白后，我刷新它 – Dorinaaaa

任何控制台中出现错误 –

不，我没有看到任何错误 – Dorinaaaa

如何安装reactjs NPM包正确

回答

相关问题