Question

我们已经创建了一个包，用于收集我们在多个项目之间共享的React组件，但出于某种原因，当我们尝试导入包时，导出是未定义的。出于问题的目的，我提供了一个调整后的index.js来说明问题（在真实场景中，这些类是在单独的文件中）：

import React, {Component} from 'react';

class MyComponent1 extends Component {
    render () {
        return (<div>Component 1</div>);
    }
}

class MyComponent2 extends Component {
    render () {
        return (<div>Component 2</div>);
    }    
}

console.log('###### MyComponent1', MyComponent1);
console.log('###### MyComponent2', MyComponent2);

export { MyComponent1, MyComponent2 };

export default function () {
    console.log('Monkey madness');
}

// Shows expected exports in module.exports, but 
// aren't there on import
console.log('###### Module', module);

我们正在使用的webpack.conf.js：

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'lib');
var APP_DIR = path.resolve(__dirname, 'src');

module.exports = {
    entry: APP_DIR + '/index.js',
    devtool: 'source-map',
    output: {
        //library: 'myReactComponents',
        path: BUILD_DIR,
        filename: 'index.js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                // include: APP_DIR,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'es2015', 'react'],
                    }
                }
            }]

    },
    plugins: [
        new CleanWebpackPlugin([BUILD_DIR], {
            root: path.resolve(__dirname),
            verbose: true,
            dry: false,
            exclude: []
        })
    ]
};

正在运行webpack会生成两个文件lib/index.js和lib/index.js.map：

Hash: 3a52a7d7bb440ee0c467
Version: webpack 3.2.0
Time: 2331ms
       Asset    Size  Chunks             Chunk Names
    index.js  158 kB       0  [emitted]  main
index.js.map  186 kB       0  [emitted]  main
  [18] ./src/index.js 3.33 kB {0} [built]
    + 36 hidden modules

在下游项目中，我们的组件包安装了npm，然后在我们的代码中：

import MyComponents, {MyComponent1, MyComponent2} from 'my-components';

console.log('>>> MyComponents', MyComponents);
console.log('>>> MyComponent1', MyComponent1);
console.log('>>> MyComponent2', MyComponent2);

运行这个我看到我们的包中的控制台语句显示：

>>> MyComponents {}
>>> MyComponent1 undefined
>>> MyComponent2 undefined

我已经尝试过调试它，看看modules.exports确实采用了指定的值，但随后很快就会丢失代码中发生的其他事情。

任何人都可以建议可能出现的问题，以及如何解决这个问题？

顺便说一下，我刚尝试用gulp构建这个，我不会遇到这个问题，所以我怀疑我的webpack设置有问题吗？主要版本：

＆＃34; babel-core＆＃34;：＆＃34; ^ 6.25.0＆＃34;
＆＃34; babel-loader＆＃34;：＆＃34; ^ 7.1.1＆＃34;
＆＃34; babel-eslint＆＃34;：＆＃34; ^ 7.2.3＆＃34;
＆＃34;反应＆＃34;：＆＃34; ^ 15.6.0＆＃34;
＆＃34; webpack＆＃34;：＆＃34; ^ 3.2.0＆＃34;
＆＃34; babel-preset-es2015＆＃34;：＆＃34; ^ 6.24.1＆＃34;
＆＃34; babel-preset-react＆＃34;：＆＃34; ^ 6.24.1＆＃34;

Answer 1

默认libraryTarget为var。 Docs请尝试指定umd。

同时检查您的资源库main文件中的package.json字段，以指向lib/index.js

ES6 / React包 - 尝试导入时未定义导出的类（使用webpack构建）？

1 个答案: