Webpack 输出为空对象

IT技术 javascript reactjs npm webpack
2021-04-03 05:24:14

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

按钮.jsx:

import React, {Component} from 'react'

export class Button extends Component {

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

export default Button

索引.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 bundle 不会公开您的导出,因为它假定您正在构建应用程序而不是库(这是 webpack 更常见的用途)。您可以通过配置output.library来创建库output.libraryTarget

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

output.libraryTarget是module的格式,它还允许您将库公开为全局变量。commonjs2是 Node 使用的module格式。请参阅什么是 commonjs2?commonjs之间的区别commonjs2

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

谢谢你!关于库和应用程序的一点非常重要 IMO,因为网络上的大多数(实际上几乎所有我见过的)示例都是应用程序而不是库。
2021-05-24 05:24:14
这是否也适用于将在浏览器中使用的库(带有脚本标签,而不是反应)?我面临同样的问题,我尝试了所有 libraryTarget 的值,但它总是输出一个空对象。
2021-05-28 05:24:14
谢谢!对于那些因为要导出多个文件而遇到相同问题的人,请查看此处:github.com/webpack/webpack/tree/master/examples/...
2021-06-10 05:24:14