babel-plugin-import与Multiple Targets模式下的webpack配置不兼容

[cexoso]

在Multiple Targets模式下

webpack.config.js

注意babel-plugin-import各配置了一次

var webpack = require('webpack')
var path = require('path')
var nodeExternals = require('webpack-node-externals');
module.exports = [
    {
        name: 'node',
       ...
        module: {
            rules: [
                ...
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['env'],
                        plugins: ["transform-runtime", ["import", {
                            "libraryName": "antd-mobile"
                            // 由于是打包到node环境下的代码，所以不需要对css进行import
                        }]]
                    }
                }
                ...
            ]
        }
    },
   {
        name: 'frontend',
       ...
        module: {
            rules: [
                ...
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['env'],
                        plugins: ["transform-runtime", ["import", {
                            "libraryName": "antd-mobile"
                            "style": 'css'// 前端环境需要打包css所以配置了此项
                        }]]
                    }
                }
                ...
            ]
        }
    }
]

希望的表现为，打包到node环境的代码不要导入css，而前端代码需要打包antd-mobile的css.

实际的表现为，都打包了css。

可能的原因： https://github.com/ant-design/babel-plugin-import/blob/40295c56dec18140fe6b300ce66e16f30fb7b0b0/src/index.js#L22-L23 是否此处采用了单例模式有问题。

[stkevintan]

confirm, 但是一看这时间4月6号，心里凉凉

[crazyxhz]

确实有这个问题，babel7 两个实例，第二个 style function无效

        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        }),
        fixBabelImports('myUI', {
            libraryName: 'myUI',
            libraryDirectory: 'build',
            style: name => {
                if (HasCssComponents.includes(name)) {
                    return `${name}.css`;
                }
                return false;
            },
        }),

[TingLen]

确实有这个问题，babel7 两个实例，第二个 style function无效

        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        }),
        fixBabelImports('myUI', {
            libraryName: 'myUI',
            libraryDirectory: 'build',
            style: name => {
                if (HasCssComponents.includes(name)) {
                    return `${name}.css`;
                }
                return false;
            },
        }),

请问你解决了吗，目前我也遇到了这个问题，多个fixBabelImports中，第二个style function 无效@crazyxhz