import 插件导致 babel 得到的代码错误

[jinliming2]

由于需要 Draggable 的 Modal，所以安装了 https://github.com/DylanVann/ant-design-draggable-modal 这个包，但是调了半天代码总是报错。

由于那个包开了 Source Map，所以一直是对照着源码去看的，后来在 Chrome 的设置里把 Source Map 禁用掉才发现问题：

在那个包的 draggableModalReducer 文件里，case 'show' 的那一段代码里，源代码是长这样的：

index.es.js 和 index.js 里的代码也是对的：


但是在 Webpack 经过 babel 转码得到的代码却变成了这样：

其中 modalState_1 变量被转成了 m，而下面的 var centerX = state.windowSize.width / 2 - modalState_1.width / 2; 中的 modalState_1 应该被转成 m，可是却得到了 antd_es_modal__WEBPACK_IMPORTED_MODULE_1__["default"]，致使这里取 width 属性是 undefined，导致整个包出现异常。

禁用 babel-plugin-import 就正常了。

babel.config.js 配置：

module.exports = api => {
  api && api.cache.forever();

  const presets = [
    ['@babel/preset-env', { targets: '> 2.153%, not dead' }],
    '@babel/preset-react',
  ];
  const plugins = [
    ['@babel/plugin-proposal-class-properties'],
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ];

  return { presets, plugins };
};

[zquancai]

webpack4.x?

[jinliming2]

@zquancai 对，webpack 4.39.3

[zquancai]

不知道你遇到的问题和我遇到的是不是同个问题，我发现 babel-plugin-import 貌似局部变量替换有 bug #355

[jinliming2]

@zquancai 我也不太确定，但是肉眼看上去好像有点区别。等我周一去公司把你修改的版本测试一下看看结果吧。

[jinliming2]

@zquancai 好像是有效果，之前的错误代码变正常了，但是还是有其他的报错，我再检查一下是不是有其他问题。