hi 有详细使用方式吗...

javascripet commented 6 years ago

最好能用zan-ui做demo 麻烦啦

jessejyang commented 6 years ago

基本做法一样的，前两天刚刚把zan-ui的demo删掉，晚上我在把我本地的传上来好了可以参考下iview的，https://github.com/JJJYY/mpvue-iview

javascripet commented 6 years ago

iview看了下有以下疑惑 1.搜了下import-weapp-component仅在webpack.config调用了下, 没找到其他与小程序ui组件相关联的地方, 与第二个问题相结合:

在每个页面index.js里发现相应引用 'usingComponents': { 'i-toast': '/iview/toast/index', 'i-button': '/iview/button/index' } 这与不使用"import-weapp-component"似乎没区别啊..不太明白"import-weapp-component"的用处是.. 3.普通引用一般样式组件其实没问题, 就是toast这些需要调方法的会碰到不知道如何引用Toast方法的问题, 我看到你的iviewdemo里有个utils/index 解决了这个问题, 那么import-weapp-component的作用在哪呢...

jessejyang commented 6 years ago

问题1，2

原理：在webpack的emit的时候读取usingComponents的内容，并根据usingComponents中引入的组件的路径检查是否存在对应组件，若存在将其自动copy到dist，所以并不需要特殊配置，只需要引入组件。如果不引用，是不会copy过去的。

另外：还有一种引入原生组件的方式是将所有组件放置在static文件夹下，WebpackCopyPlugin会将static下的所有内容都复制到dist，import-weapp-component相比与这种方式相当于增加了按需加载(只会copy usingComponents引用的组件)，并且不局限于固定路径。

问题3

utils/index里面的方法是我从Toast组件拆出来的，为的是防止webpack将Toast的js文件打包，执行两次Component(copy的组件一次，webpack打包的一次),产生重复注册的错误，这个是我的疏忽，后续增加对这种错误的说明

javascripet commented 6 years ago

非常感谢问题1,2回答得十分详细, 我也去dist目录看了下按需拷贝对小程序的大小限制来说很有用 zanui的toast引入我始终搞不定.. 依葫芦画瓢 index.vue上const Toast = require('../_zan/toast/toast'), 开发工具里直接报错"Cannot assign to read only property 'exports' of object '#

jessejyang / import-weapp-component

hi 有详细使用方式吗... #2

问题1，2

问题3