Question

如何使用webpack添加新的npm包？我无法理解主要想法。

中的npm install react-ripple-effect --save-dev

之后，/ node_modules / react-ripple-effect

中会出现一堆文件

我的结构：

>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负责阅读您的来源并捆绑所有必要的模块。

这个想法是：

使用NPM安装模块。
您使用import <module>
使用webpack进行扩展时，它会读取您的源代码，找到import并捆绑它。

React Webpack添加新的npm包

1 个答案: