Question

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

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没有正确捆绑索引文件。任何想法在这里可能是错的？

Answer 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中，它将向您介绍一个小例子。

Webpack输出是空对象

1 个答案: