Импорт пользовательских результатов пакета npm в пустом/нулевом объекте

Question

Я могу импортировать MyComponent в том же пакете и визуализировать его на странице, но я не могу связать или загрузить пакет MyComponent и импортировать компонент.

package.json:

{ 
    "name": "my-component", 
    "version": "1.0.0", 
    "main": "dist/index.js", 
    "directories": {}, 
    "dependencies": {}, 
    "devDependencies": { 
    "babel-loader": "^6.2.3", 
    "babel-preset-es2015": "", 
    "babel-preset-react": "", 
    "css": "^2.2.1", 
    "css-loader": "^0.23.1", 
    "file-loader": "^0.8.5", 
    "node-sass": "^3.4.2", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "sass": "^0.5.0", 
    "sass-loader": "^3.1.2", 
    "style": "0.0.3", 
    "style-loader": "^0.13.0", 
    "webpack": "^1.12.13", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

webpack.config.js:

var path = require('path'); 

module.exports = { 
    entry: './src/MyComponent.jsx', 
    output: { 
    path: './dist/', 
    filename: './index.js' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx$/, 
     include: path.resolve(__dirname), 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['react', 'es2015'] 
     } 
    }, 
    { 
     test: /\.scss$/, 
     include: /.scss$/, 
     loader: 'style!css!sass' 
    }, 
    { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]", 
    },] 
    } 
}; 

./src/MyComponent.jsx

import React from 'react'; 

export default class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div>Hello World.</div> 
    ); 
    } 
} 

MyComponent.propTypes = { 
    class: React.PropTypes.string 
} 
MyComponent.defaultProps = { 
    class: '' 
} 

console.log(MyComponent) 

Использование сервера Dev WebPack, я способный импортировать этот компонент в другой файл и отобразить его на странице.

Когда я связываю и/или установить результаты WebPack строить в другом проекте, я ожидаю, чтобы иметь возможность быть в состоянии сделать то же самое, как это:

нового app.jsx:

import React from 'react' 
import ReactDOM from 'react-dom' 
import MyComponent from 'my-component' 
console.log(MyComponent) 
ReactDOM.render(MyComponent, document.body) 

Когда я импортирую модуль из «my-component», оператор console.log, который существует в MyComponent.jsx, регистрирует «функцию MyComponent (реквизит)» {... », как ожидалось, но оператор console.log в новое приложение регистрирует пустой объект.

вывод консоли при рендеринге new-app.jsx: Я считаю, что первый журнал - это журнал, поступающий из MyComponent.jsx, а второй журнал - из моего нового приложения.

index.js:19783 MyComponent(props) { 
      _classCallCheck(this, MyComponent); 

      return _possibleConstructorReturn(this, Object.getPrototypeOf(MyComponent).call(this, props)); 
      } 
index.js:58 Object {} 

Я ничего не теряю в своих конфигурациях? Я экспортирую/импортирую неправильно?

Answer 1

Решение было добавить это к выходу в webpack.config.js

library: 'MyComponent', 
libraryTarget: 'umd'