React Webpack добавить новый пакет npm

Question

Как добавить новый пакет npm с webpack? Я не могу понять основную идею.

Пример, давайте использовать npm install react-ripple-effect --save-dev из npm package here

После этого, куча файлов появляется в/node_modules/реагируют-пульсация эффект

Моя структура:

>ReactApp 
>>App 
>>>components 
----Arctic.jsx 
----ArcticForm.jsx 
----ArcticMessage.jsx 
----Main.jsx 
----Nav.jsx 
>>>styles 
----app.scss 
---app.jsx 
>>node_modules 
... 
>>public 
---bundle.js 
---index.html 
--package.json 
--server.js 
--webpack.config.js 

package.json

{ 
    "name": "react-app", 
    "version": "1.0.0", 
    "description": "xxx", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "xxx", 
    "license": "xxx", 
    "dependencies": { 
    "express": "^4.14.0", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "react-router": "^2.0.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.5.1", 
    "babel-loader": "^6.2.2", 
    "babel-preset-es2015": "^6.5.0", 
    "babel-preset-react": "^6.5.0", 
    "css-loader": "^0.23.1", 
    "foundation-sites": "^6.2.0", 
    "jquery": "^2.2.1", 
    "node-sass": "^3.4.2", 
    "react-ripple-effect": "^1.0.4", 
    "sass-loader": "^3.1.2", 
    "script-loader": "^0.6.1", 
    "style-loader": "^0.13.0", 
    "webpack": "^1.12.13" 
    } 
} 

webpack.config.js

var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'script!jquery/dist/jquery.min.js', 
    'script!foundation-sites/dist/foundation.min.js', 
    './app/app.jsx' 
    ], 
    externals: { 
    jquery: 'jQuery' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     '$': 'jquery', 
     'jQuery': 'jquery' 
    }) 
    ], 
    output: { 
    path: __dirname, 
    filename: './public/bundle.js' 
    }, 
    resolve: { 
    root: __dirname, 
    alias: { 
     Main: 'app/components/Main.jsx', 
     Nav: 'app/components/Nav.jsx', 
     Arctic: 'app/components/Arctic.jsx', 
     ArcticForm: 'app/components/ArcticForm.jsx', 
     ArcticMessage: 'app/components/ArcticMessage.jsx', 
     applicationStyles: 'app/styles/app.scss' 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     }, 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/ 
     } 
    ] 
    } 
}; 

app.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var {Route, Router, IndexRoute, hashHistory} = require('react-router'); 
var Main = require('Main'); 
var Nav = require('Nav'); 
var Arctic = require('Arctic'); 

// Load foundation 
require('style!css!foundation-sites/dist/foundation.min.css') 
$(document).foundation(); 

// App css 
require('style!css!sass!applicationStyles') 

ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={Main}> 
     <IndexRoute component={Arctic}/> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
); 

main.jsx

var React = require('react'); 
var Nav = require('Nav'); 

var Main = (props) => { 
    return (
     <div> 
     <Nav /> 
     <div className="row"> 
      <div className="columns medium-6 large-4 small-centered"> 
      {props.children} 
      </div> 
     </div> 
     </div> 
    ); 
    } 

module.exports = Main; 

arctic.jsx

var React = require('react'); 
var ArcticForm = require('ArcticForm'); 
var ArcticMessage = require('ArcticMessage'); 

var Arctic = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     name: "polar bear!" 
    }; 
    }, 
    getInitialState: function() { 
    return { 
     name: this.props.name 
    }; 
    }, 
    handleNewData: function (updates) { 
    this.setState(updates); 
    }, 
    render: function(){ 
    var name = this.state.name; 
    return (
     <div> 
     <h1 className="text-center">Arctic</h1> 
     <ArcticForm onNewData={this.handleNewData}/> 
     <ArcticMessage name={name}/> 
     </div> 
    ) 
    } 
}); 

module.exports = Arctic; 

ArcticForm.jsx

var React = require('react'); 

var ArcticForm = React.createClass({ 
    onFormSubmit: function (e) { 
    e.preventDefault(); 

    var updates = {}; 
    var name = this.refs.name.value; 

    if (name.length > 0) { 
     this.refs.name.value = ''; 
     updates.name = name; 
    } 
    this.props.onNewData(updates); 
    }, 
    render: function() { 
    return (
     <div> 
     <form onSubmit={this.onFormSubmit}> 
      <input type="text" ref="name" placeholder="Name" /> 
      <button type="submit" className="button expanded hollow"> 
      Submit 
      </button> 
     </form> 
     </div> 
    ); 
    } 
}); 

module.exports = ArcticForm; 

ArcticMessage.jsx

var React = require('react'); 
var ArcticForm = require('ArcticForm'); 

var ArcticMessage = React.createClass({ 
    render: function() { 
    var name = this.props.name; 
    return (
     <h3 className="text-center">Hi {name}</h3> 
    ); 
    } 
}); 

module.exports = ArcticMessage; 

Пакет инструкций скажите мне, чтобы включить это, но где и как? И как включить это в webpack?

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import { RippleButton } from 'react-ripple-effect'; 

class App extends React.Component { 

    render(){ 
    return(
     <RippleButton>Click On Me!</RippleButton> 
    ) 
    } 

} 


ReactDOM.render(<App />, document.getElementById("app")) 

Answer 1

Вы не импортируете в webpack ... Webpack несет ответственность за чтение вашего источника и сбор всех необходимых модулей.

Идея такова:

1. Вы устанавливаете модуль с помощью НПМ.
2. используется в исходном коде с помощью import <module>
3. Когда Bulding с WebPack, он читает ваш исходный код, находит, что import и связки его.