Webpack 输出为空对象

Posted 2023-02-22

【中文标题】Webpack 输出为空对象

【英文标题】：Webpack output is empty object

【发布时间】：2017-11-16 09:59:29

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

output.libraryTarget 是模块的格式，它还允许您将库公开为全局变量。 commonjs2 是 Node 使用的模块格式。 commonjs 和 commonjs2 的区别见 What is commonjs2?。

由于您使用的是 React，您会期望库的使用者将 React 作为依赖项存在，因此您不想将它包含在您的包中。为此，您可以将其定义为External。这显示在Authoring Libraries 中，它会引导您完成一个小示例。

【讨论】：

谢谢！对于那些因为导出多个文件而遇到相同问题的人，请看这里：github.com/webpack/webpack/tree/master/examples/…

这是否也适用于将在浏览器中使用的库（带有脚本标签，而不是反应）？我面临同样的问题，我尝试了所有 libraryTarget 的值，它总是输出一个空对象。

谢谢！关于库和应用程序的部分在 IMO 中非常重要，因为网络上的大多数（实际上几乎是我所看到的所有）示例都是应用程序而不是库。