好久没有更新blog了hhh，最近在做一个针对L3门店的视觉组件库，零零散散大致一个月[其实算起来是两周]，第一版的开发及构建已经基本完成了，没有设计的情况下，对于之前项目大致做了一些整理，抽出了最常用的组件，并尽量减少其依赖，针对图表和日历还是觉得应该加入echarts和moment，这样定制起来会方便些。

项目构成

基于CRA2.0+Storybook+Rollup+Lerna

在开发组件的时候没有遇到太多困难，基本上是设计好功能点，逐一完成，[主要也是因为没有复杂的动画和业务需求👨🏾‍🔬]

组件库起名为Saga,意为冰岛的冒险故事。

Version1存在许多不足，没有过多的动画，甚至图标都是在线随便mock的，字体也无考究，一来是为了更贴近业务线，二来是给自己偷懒的理由，Q3也有提高的空间，比如Typescript重写、单测、对props的编排等等，不过现阶段的计划算是圆满达成。

FAQ 记录一些环境配置的问题

项目过程中最大的问题还是各种环境导致的崩溃，这个大家都有所体会

🐛-1 -> [!] (babel plugin) Error: Babel 7.0.0-beta.56 has dropped support for the ‘helpersNamespace’ utility

Fix: 请安装 rollup-plugin-babel@3这个包

🐛-2 -> [!] (babel plugin) Error: css 语法编译出错

Fix：请安装rollup-plugin-postcss这个包

🐛-3 -> [!] (babel plugin) Error: uglify压缩js时

Fix：因为使用的是es模块，请安装rollup-plugin-uglify-es解决

🐛-4 -> [storybook] build failed 之 no babel-loader package.json

Fix：安装最新版babel-loader,babel-loader @babel/core @babel/preset-env

🐛-5 -> [storybook] build failed 之 Plugin/Preset files are not allowed to export objects, only functions

Fix：安装"babel-loader": "^7.1.5", 这个真的坑，loader为7的话，其他babel一定要降级为6，同理babel为8，其他插件为7

🐛-6 -> [rollup] 打包时会遇到其他外置依赖项的问题，比如说import xxx from ‘xxx’,此时如果提示 Error: "[name] is not exported by [module]"

Fix: 首先要安装rollup-plugin-commonjs，之后再引入namedExports的配置，在rollup.config.js中添加，详情见 https://rollupjs.org/guide/en#error-name-is-not-exported-by-module-

🐛-7 -> [rollup] 打包时发生 Error: "this is undefined"

Fix：查看是否是缺少相关依赖项，在lerna管理包的时候，要注意单包安装依赖，lerna bootstrap可升级相关依赖。

🐛-8 -> [rollup] 打包图片时出现乱码

可以添加rollup-plugin-img进行limit的配置