Webpack输出是空对象 [英] Webpack output is empty object

问题描述

我想构建一个反应组件库作为节点模块，然后将其导入到不同的项目中。但是如果我尝试导入一个组件，它只返回一个空对象。

I want to build a react component library as a node module to then import it into different projects. But if I try to import a component it just returns an empty object.

button.jsx：

button.jsx:

import React, {Component} from 'react'

export class Button extends Component {

   render() {
       return <button className='btn'>Hello Button comp</button>
   }
}

export default Button

index.js

var Button = require('./button/button').default;

module.exports  = {
   Button: Button
}

webpack.config.js

webpack.config.js

const Path = require('path');

module.exports = {
   resolve: {
      extensions: ['.js', '.jsx']
   },
   entry: {
      app: './src/components/index.js'
   },
   output: {
      path: __dirname,
      filename: 'bundle.js'
   },
   module: {
    rules: [
        {
            test: /\.jsx$/,
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'react'
                ]
            },
            exclude: /node_modules/,
            include: [
                Path.resolve(__dirname, 'src')
            ]
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: [
                    'es2015',
                    'react'
                ]
            },
            exclude: /node_modules/,
            include: [
                Path.resolve(__dirname, 'src')
            ]
        }
    ]
  }
}

package.json中的主要属性是捆绑包.js

Main property in package.json is bundle.js

我发现当我在项目中导入Button时它只是一个空对象。在我看来，好像webpack没有正确捆绑索引文件。任何想法在这里可能有什么问题？

I figured out that when I import Button in a project it is just an empty object. It seems to me as if webpack doesn't bundle the index file properly. Any ideas what could be wrong here?

推荐答案

默认情况下，webpack包不会公开您的导出，因为它假设您'重建应用程序而不是库（这是webpack的更常见用法）。您可以通过配置 output.library 和 output.libraryTarget 。

A webpack bundle does not expose your exports by default, as it assumes that you're building an app and not a library (which is the far more common use of webpack). You can create a library by configuring output.library and output.libraryTarget.

output: {
   path: __dirname,
   filename: 'bundle.js',
   library: 'yourLibName',
   libraryTarget: 'commonjs2'
},

output.libraryTarget 是模块的格式，它还允许您将库公开为全局变量。 commonjs2 是Node使用的模块格式。有关 commonjs 什么是commonjs2？ c $ c>和 commonjs2 。

output.libraryTarget is the format of the module, which would also allow you to expose the library as a global variable. commonjs2 is the module format that Node uses. See What is commonjs2? for the difference between commonjs and commonjs2.

因为你正在使用React，你会期望消费者该库将React作为依赖项存在，因此您不希望将其包含在您的包中。为此，您可以将其定义为外部。这显示在创作库中，它将向您介绍一个小例子。

Since you're using React, you'll expect that the consumer of the library will have React present as a dependency and therefore you don't want to include it in your bundle. To do that you can define it as an External. This is shown in Authoring Libraries, which walks you through a small example.

这篇关于Webpack输出是空对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！