使用babel-plugins-component报错

[zjy01]

使用babel-plugins-component的时候会报错，

• 自定义编译的主题缺少layout.css文件，导致无法加载

• DateRangePicker等文件不能转换成对应的路径，因为其是其某个文件集中export的

[e1emeb0t]

@zjy01 能把babel-plugins-component的错误信息贴出来么?

[zjy01]

babelrc 配置：

"plugins": [["component", [
    {
      "libraryName": "element-react",
      "styleLibraryName": "~react/common/style/emele-theme",
      "libDir": "src"
    },
  ]]],

webpack报错

ERROR in ./~/css-loader!./~/postcss-loader?{}!./~/sass-loader/lib/loader.js!./re
act/common/style/eleme-theme/layout.css
Module build failed: Error: ENOENT: no such file or directory, open 'D:\project
\react\common\style\eleme-theme\layout.css'
    at Error (native)
 @ ./react/common/style/eleme-theme/layout.css 4:14-194 13:2-17:4 14:20-200
 @ ./react/project/containers/TaskManage/General.jsx
 @ ./~/react-hot-loader!./~/jsx-loader!./~/babel-loader/lib!./react/project/
containers/TaskManage/index.jsx
 @ ./~/bundle-loader?lazy!./react/project/containers/TaskManage/index.jsx
 @ ./react/project/route/ProjectTaskRoute.jsx
 @ ./react/project/route/index.jsx
 @ ./react/project/index.jsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9000 webpack/hot/dev-server
./react/project/index.jsx

ERROR in ./react/project/containers/TaskManage/Summery.jsx
Module not found: Error: Can't resolve 'D:\project\react\common\style\ele
me-theme/date-range-picker.css' in 'D:\project\react\project\containers
\TaskManage'
 @ ./react/project/containers/TaskManage/Summery.jsx 33:23-107
 @ ./~/react-hot-loader!./~/jsx-loader!./~/babel-loader/lib!./react/project/
containers/TaskManage/index.jsx
 @ ./~/bundle-loader?lazy!./react/project/containers/TaskManage/index.jsx
 @ ./react/project/route/ProjectTaskRoute.jsx
 @ ./react/project/route/index.jsx
 @ ./react/project/index.jsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9000 webpack/hot/dev-server
./react/project/index.jsx

ERROR in ./react/project/containers/TaskManage/Summery.jsx
Module not found: Error: Can't resolve 'element-react/src/date-range-picker' in
'D:\project\react\project\containers\TaskManage'
 @ ./react/project/containers/TaskManage/Summery.jsx 41:24-70
 @ ./~/react-hot-loader!./~/jsx-loader!./~/babel-loader/lib!./react/project/
containers/TaskManage/index.jsx
 @ ./~/bundle-loader?lazy!./react/project/containers/TaskManage/index.jsx
 @ ./react/project/route/ProjectTaskRoute.jsx
 @ ./react/project/route/index.jsx
 @ ./react/project/index.jsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9000 webpack/hot/dev-server
./react/project/index.jsx

原因

• css 与 组件不存在一一对应关系，Layout的样式文件是row.css 和 col.css
• 组件与目录不存在一一对应关系，DateRangePicker在 /src/date-picker/date-range-picker.jsx中

[e1emeb0t]

目前来看element-react不兼容babel-plugin-component, 因为babel-plugin-component是为element-ui定制的, 好比babel-plugin-import是为ant-design定制的.

[zjy01]

感谢，还是希望大型组件库能兼容babel-plugin-component，因为其中很多组件和样式我可能并不会用到，但是还是会占据大量空间。

[e1emeb0t]

我们内部商量一下是发布一个新的babel-plugin, 还是兼容一下babel-plugin-component.

[QingWei-Li]

建议出一个新的插件，好把 babel-plugin-component 换掉 😂 有些 bug 我也修不了

[eschmar]

If i understood correctly, you were discussing babel-plugin-component support. Is there any update on this? The package currently almost takes up 1 MB (non-compressed).

[e1emeb0t]

@eschmar element-react should support tree-shaking in webpack 2 and above, it helps reducing the bundle size. This topic mainly was talking about customizing the theme with element-react.

[ahan]

这个『layout.css not found』的问题有解决方案吗？

如果暂时还未有方案，可不可以从官网文档中那那段『搭配插件按需引入组件主题』暂时隐藏，不然许多用户会花了时间安装，发现其实是不可以用的 对应文档：https://eleme.github.io/element-react/#/zh-CN/custom-theme

[e1emeb0t]

好的, 我会暂时隐藏.