导入自定义npm包导致空/空对象

问题描述

我可以在同一个包中导入MyComponent并将其呈现在页面上，但是我无法链接或下载MyComponent包并导入组件。

I am able to import MyComponent in the same package and have it render on the page, but I am unable to link or download the MyComponent package and import the component.

package.json：

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：

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

./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)

使用webpack dev服务器，我可以将这个组件导入到另一个文件中并将其呈现给页面。

Using webpack dev server, I'm able to import this component in another file and render it to the page.

当我链接和/或安装webpack构建在另一个项目中的结果，我希望能够这样做，如下所示：

When I link and/or install the results of the webpack build in another project, I expect to be able to be able to do the same, like this:

new-app.jsx：

new-app.jsx:

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

当我从'我的组件'导入模块时，MyComponent.jsx中存在的console.log语句会按照预期的方式记录函数MyComponent（props）{...，而新的console.log语句申请日志是一个空对象。

When I import the module from 'my-component' the console.log statement that exists in MyComponent.jsx logs the "function MyComponent(props) {..." as expected, but the console.log statement in the new application logs an empty object.

在呈现new-app.jsx时的控制台输出：我相信第一个日志是来自MyComponent.jsx的日志，第二个日志来自我的新应用程序。

console output when rendering new-app.jsx: I believe the first log is the log coming from MyComponent.jsx and the second log is coming from my new application.

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

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

我没有任何东西在我的配置？我是以不正确的方式导出/导入的吗？

Am I missing anything in my configs? Am I exporting/importing in an incorrect way?

推荐答案

解决方案是将其添加到webpack.config.js中的输出

The solution was to add this to the output in webpack.config.js

library: 'MyComponent',
libraryTarget: 'umd'

这篇关于导入自定义npm包导致空/空对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！