尝试使用这个库过程中遇到的问题

[sxcooler]

首先是rctui的npm包没有包含source-map，所以在webpack里用source-map-loader的时候会报错。

加入source-map-loader的例外以后，发现该库用到object-rest-spread语法，尝试加入babel-plugin-transform-object-rest-spread、并给rctui专门配置babel-loader后解决。

但是由于我的项目使用的是preact，babelrc里有["transform-react-jsx", { "pragma": "h" }]这样的配置，正常经过编译的npm库由于不走babel，所以不会遇到问题（有preact-compat兼容react库），但rctui如前所述必须经过babel编译，而又是针对react开发的库没有使用到“h”，所以报错。

尝试删除.babelrc并把不同的babel options放到webpack config以后，发现这个项目的webpack也是用es6写的，没有babelrc无法运行，遂最终放弃。

究其根本，该项目发布的npm包没有经过build是主要原因，也许作者是为了能够按需引入。

开源作者非常辛苦，这个项目也非常优秀，如果我后续能解决这些问题，会给出PR。

感谢。

[vipcxj]

试试用babel-register

[Lobos]

没有编译是为了按需引入和调试代码。如果编译有问题，可以直接用这个编译好的包 https://unpkg.com/rctui/dist/index.js

// html
<script src="https://unpkg.com/rctui/dist/index.js"></script>
// webpack config
externals: {'react': 'React', 'react-dom': 'ReactDOM', 'rctui': 'rctui'},
// jsx
import { Form } from 'rctui'
...

[sxcooler]

但是这样就不能按需引入了，我看react-bootstrap和ant-design是可以按需引入的，可以参考他们的实现方式，感谢您回复。

[Lobos]

如果发布预编译es5的话，就失去theme和css module的能力了，也不方便调试，我再想想有没有什么好方案吧

[vipcxj]

他们的按需引入是靠插件吧，至少ant-design是，原理是按一定规则命名组件的js文件名称，并放入特定目录，到时插件会自动替换import那一行的东西

[Lobos]

@vipcxj 现在就是可以按需import的，问题在于rctui使用了sass来处理theme替换，css-loader来实现css module，所以即使编译成es5发布，也要配置webpack。当然，可以把sass也编译了，但是那样就不能实现theme的功能了。

[sxcooler]

我的问题主要是使用了Preact，所以src里的代码和node_modules里的代码需要不同的处理方式，但是即使单独为rctui配置规则，由于preact-compat代替react和react-dom的原理是在webpack中加alias，而rctui由于没有预编译，还需要经过babel，而babel的config我又用在了webpack自身，导致不能很好的分离配置。 总之主要还是特殊环境的问题，通常的React环境、webpack配置文件按es5方式写的话，应该问题不大。