Question

我在mobx上做了一个滑块并使用webpack 3捆绑它。我使用“externals”从滑块的bundle中排除了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/andiwilflly/rslider

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

Answer 1

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

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

module.exports = {
    ... ,
    output: {
        ... ,
        libraryTarget: 'umd'
    }
}

无法在我精心制作的模块中导入模块

1 个答案: