Kann eine Komponentenbibliothek in Reaktion mit Webpack und Babel

Question

nicht freilegen Ich erstelle eine kleine Komponentenbibliothek für reagieren. Etwas, das wie var Components = require('components') benötigt werden kann. Dies wird einzelne Komponenten haben, ähnlich wie react-bootstrap. Ich versuche, Webpack mit Babel zu verwenden, um dies in eine index.js Datei zu kompilieren. Die Zusammenstellung ist gut gelaufen. Ich habe dies in meiner lokalen npm-Registry veröffentlicht und in einem meiner anderen Projekte installiert. Wenn ich es benötige - require('components') - gibt die Anforderung ein leeres Objekt zurück. Unten ist meine Ordnerstruktur

root 
|- components 
| |- ImageEditor.js 
| 
|- lib 
| |- index.compiled.js (file compiled by webpack) 
| 
|- index.js (requires ./components/ImageEditor.js, entry point for webpack) 
|- webpack.config.js 

ImageEditor.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Canvas from './utils/canvas'; 
import '../stylesheets/imageeditor.scss'; 

class ImageManipulation extends React.Component { 
    static propTypes = {}; 
    state = { 
     height: 200, 
     width: 200, 
     scale: 1.25 
    }; 

    static defaultProps = { 
     color: [213, 214, 217, 0.6], 
     image: "" 
    }; 

    ... 

    render() { 
     return (
      <div className="_react-image-manipulation"> 
       <div className="_cover-box"> 
        { this.loadComponent() } 
       </div> 
      </div> 
     ); 
    } 
} 

export default ImageManipulation; 

index.js

import ImageEditor from './components/ImageEditor'; 

export default { 
    ImageEditor 
}; 

webpack.config.js

var path = require('path'); 
var NODE_ENV = process.env.NODE_ENV || 'development'; 
var WebpackNotifierPlugin = require('webpack-notifier'); 
var UglifyJSPlugin = require("webpack/lib/optimize/UglifyJsPlugin"); 
var CleanWebpackPlugin = require("clean-webpack-plugin"); 

var commonPlugins = [ 
    new WebpackNotifierPlugin({ 
     title: 'Contour Components' 
    }) 
]; 

function getPlugins() { 
    if (NODE_ENV == 'prod') { 
     commonPlugins.push(new CleanWebpackPlugin(['lib/*'])); 
     commonPlugins.push(new UglifyJSPlugin({ 
      compress: { 
       warnings: false 
      } 
     })); 
    } 
    return commonPlugins; 
} 

module.exports = { 
    devtool: 'sourcemap', 
    entry: { 
     index: './index.js' 
    }, 
    output: { 
     path: path.join(__dirname, 'public'), 
     filename: '[name].compiled.js' 
    }, 
    plugins: getPlugins(), 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loader: 'babel', 
      query: { 
       cacheDirectory: true, 
       presets: ['es2015', 'stage-0', 'react'], 
       plugins: ['add-module-exports', "transform-class-properties"] 
      }, 
      exclude: /node_modules/ 
     }, { 
      test: /\.json$/, 
      loader: 'json-loader' 
     }, { 
      test: /\.png$/, 
      loader: "url-loader?limit=100000&mimetype=image/png" 
     }, { 
      test: /(\.scss|\.css)$/, 
      include: /components/, 
      loader: 'style!css!sass' 
     }] 
    }, 
    resolve: { 
     extensions: ['', '.scss', '.js', '.json', '.png'], 
     modulesDirectories: [ 
      'node_modules', 
      'components' 
     ] 
    } 
}; 

Irgendeine Idee, was ich hier falsch mache?

Answer 1

Sie exportieren die Komponente in das Objekt im Standardexport. Babel 6 erstellt das folgende CommonJS-Modul für Sie. See REPL:

exports.default = { 
    ImageEditor: ImageEditor 
}; 

Dann können Sie diese Komponente wie folgt verwenden:

var ImageEditor = require('my-lib').default.ImageEditor 

Ihre Komponente unter dem Standardschlüssel versteckt ist. Wenn Sie es nicht möchten, verwenden Sie stattdessen benannte Exporte.

export {ImageEditor}; 

Dazu erzeugt Babel den folgenden Code

exports.ImageEditor = ImageEditor; 

Schauen Sie, keine Extra default Schlüssel, und alles funktioniert wie

erwartet