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

问题描述

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

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 中的主要属性是 bundle.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 和 commonjs 的区别见什么是commonjs2?代码>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 作为依赖项存在，因此您不想将它包含在您的包中.为此，您可以将其定义为 External.这在 创作库 中显示，它会引导您完成一个小示例.

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屋！