peko-bot / portals-wrapper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CircleCI codecov Greenkeeper badge

Q:这是什么?
A:面上标着是省水利厅集成各单位资源的门户,但其实只是个 js 加载器

Q:???没懂,怎么就变成加载器了?
A:只要你打包时遵守一定的规则,你的模块就可以让我加载出来,整个项目有一半在做这件事

Q:那这个是怎么实现的?
A:这个我得先讲一下插件的定义...

Q:允了
A:指的是在编译完成后像这样的、且作为入口文件的模块

Q:为什么?
A:因为各家单位技术栈都不同,但业主希望有代码级的交互,这就不能简简单单地套一个 iframe
又因为对浏览器而言,只要是 js 代码它就能加载,刚好 webpack 能干这件事,所以就给静态文件写了个规范方便管理
不管是 jsx 还是模版,只要最后打包出来是插件我就加载给你看

Q:那怎么才能用 webpack 打包出一个插件呢?
A: 你只需要在原先的 entry 路径外,给你的模块套一层类,就像这样
然后设置 outputlibraryTargetcommonjs2 即可

Q:那你是怎么处理布局的?
A:用 react-grid-layout,内置了插件的拖拽

Q:那我该怎么在本地看到效果?
A:

git clone https://github.com/zy410419243/portals-wrapper.git
cd portals-wrapper
npm install
npm start

打开你的的浏览器访问 http://localhost:9099/#/display?ticket=test

About

License:MIT License


Languages

Language:TypeScript 72.1%Language:CSS 10.6%Language:HTML 9.7%Language:JavaScript 7.6%