0

我在 mobx 上做了一个滑块并使用 webpack 3 捆绑它。我使用“externals”从滑块的捆绑包中排除了 mobx。然后我将它作为包发布，创建了一个 mobx-sandbox 并在那里安装了滑块。结果我收到一个错误，因为包无法导入 mobx。但我希望滑块会找到 mobx，因为我在沙盒页面上导入了它。

我也在控制台中收到：

[mobx] 警告：有多个 mobx 实例处于活动状态。这可能会导致意想不到的结果。

我错过了什么？

滑块webpack.config：

var path = require('path');
var webpack = require('webpack');


module.exports = {
    node: {
        fs: "empty" // https://github.com/josephsavona/valuable/issues/9
    },
    devtool: 'source-map',
    entry: {
        bundle: [ "./src/index.js" ]
    },
    output: {
        path: path.join(__dirname, "lib"),
        filename: "index.js"
    },
    externals: {
         'react': {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        },
         'mobx': {
            root: 'mobx',
            commonjs2: 'mobx',
            commonjs: 'mobx',
            amd: 'mobx'
        },
        'mobx-react': {
            root: 'mobx-react',
            commonjs2: 'mobx-react',
            commonjs: 'mobx-react',
            amd: 'mobx-react'
        }
    },
    stats: {
        colors: true,
        reasons: true
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /\/node_modules\//,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

滑块的.babelrc

{
    "presets": ["es2015", "react", "stage-0"],
    "plugins": ["transform-decorators-legacy"]
}

滑块存储库： https ://github.com/andiwilfflly/rslider

沙盒存储库： https ://github.com/SkunSHD/rslider-test-sandbox

4

1 回答 1

0

问题在于捆绑中没有 umd 的导入。

输出中的这一行有助于正确导入包中的模块 webpack.config：

module.exports = {
    ... ,
    output: {
        ... ,
        libraryTarget: 'umd'
    }
}
于 2017-07-18T07:59:42.550 回答