next
next copied to clipboard
alibaba-fusion
Fusion无线端组件按需加载方案
Feature Description
Fusion组件目前对于无线端的组件主要采用优先取meet-react组件，若meet-react不存在则会通过相对路径引入PC端的组件，这就带来了以下几个问题：
1，fusion组件库构建后针对meet-react的引入方式为大包引入方式，无法进行按需加载，如下所示，建议lib产物对meet-react的引入能够自动转为类似这种引入方式：@alifd/meet-react/lib/button；
2，meet-react组件库依赖的样式文件（src/core/index.css）只在库的入口文件中引入，如果要按照上面的按需引入模式，需要在引入指定组件的同时引入样式文件；
3，fusion中针对无线组件的引入策略是如果meet-react中有对应组件就是用对应组件，如果没有就使用PC组件，如果按照上面直接引入lib/xxx的模式，如果meet-react中没有对应组件，构建过程会报错(如果是整包引入的方式则不会)，如下所示：
4，fusion中针对无线组件引入，有可能会直接使用PC端的组件，但是在引入过程中只引入了js资源，没引入样式文件，导致针对无线组件的使用情况，没有一个按需引入样式文件的最佳实践，建议针对无线组件，如果使用了对应的PC组件，将样式文件一并引入；
Feature Description
Fusion组件目前对于无线端的组件主要采用优先取meet-react组件，若meet-react不存在则会通过相对路径引入PC端的组件，这就带来了以下几个问题： 1，fusion组件库构建后针对meet-react的引入方式为大包引入方式，无法进行按需加载，如下所示，建议lib产物对meet-react的引入能够自动转为类似这种引入方式：@alifd/meet-react/lib/button；
1、2、3 目前都可解
对于第 4 点 https://github.com/alibaba-fusion/next/blob/7edc87f010e3f74c9345bb5efc4924725ff185ef/src/upload/mobile/index.jsx#L1-L5
对这种引入方式，不太好区分
关于第4点我是这么认为的，无非就是两种手段： 1，维护一个组件能力配置，每次发布的时候根据组件能力配置可以明确知道哪些组件是引入的pc组件，哪些是引入的meet组件，对于引入pc组件的情况，同时引入style.js，meet组件有新增或者更新则直接更新配置文件即可； 2，发布时直接去爬一下meet当前组件池子，这样就知道哪些有哪些没有了。
next/src/upload/mobile/index.jsx
import NextUpload from '../index';
import '../main.scss'
const Upload = NextUpload;
export default Upload;
Mobile 文件里面直接引入 样式文件？
next/src/upload/mobile/index.jsx
import NextUpload from '../index'; import '../main.scss' const Upload = NextUpload; export default Upload;Mobile 文件里面直接引入 样式文件？
会有这个问题吗
关于第4点我是这么认为的，无非就是两种手段： 1，维护一个组件能力配置，每次发布的时候根据组件能力配置可以明确知道哪些组件是引入的pc组件，哪些是引入的meet组件，对于引入pc组件的情况，同时引入style.js，meet组件有新增或者更新则直接更新配置文件即可； 2，发布时直接去爬一下meet当前组件池子，这样就知道哪些有哪些没有了。
不是指维护这份 pc <=> mobile 的映射关系，这个手动维护一份也可以。
我前面说的方案基本是基于 babel-plugin-import 改造来考虑的，对于 meet-react 的引入，很好区分。对于
import NextUpload from '../index';
这种 pc 组件的引入，没法很好的识别，去引入它的样式
因为 Mobile 体系本身就已经把 css 直接在js里面引用了，所以在 Next 里面 upload/mobile/index.jsx 文件中引入 css 是不是也是合理的？ 不影响 PC 的使用吧。
之前有些工程体系不支持在js中内置 scss 的一定是只用了 Next 没用 Meet 的。
我前面说的方案基本是基于
babel-plugin-import改造来考虑的，对于 meet-react 的引入，很好区分。对于import NextUpload from '../index';这种 pc 组件的引入，没法很好的识别，去引入它的样式
了解，既然维护了一份映射关系了，哪些组件需要通过相对路径引入PC组件就变得非常明确了，对于这些组件引入对应的样式是不是就可以了？
因为 Mobile 体系本身就已经把 css 直接在js里面引用了，所以在 Next 里面 upload/mobile/index.jsx 文件中引入 css 是不是也是合理的？ 不影响 PC 的使用吧。
我觉得是合理的，如果更进一步，是否要考虑一下 pc和mobile主题包统一的问题？
因为 Mobile 体系本身就已经把 css 直接在js里面引用了，所以在 Next 里面 upload/mobile/index.jsx 文件中引入 css 是不是也是合理的？ 不影响 PC 的使用吧。
之前有些工程体系不支持在js中内置 scss 的一定是只用了 Next 没用 Meet 的。
这里表达的意思是: src 源文件用 sass
// src/upload/mobile/index.jsx
import NextUpload from '../index';
import '../main.scss'
const Upload = NextUpload;
export default Upload;
构建产物用 css 么？
// es/upload/mobile/index.jsx
import NextUpload from '../index';
import ‘../main.css’
var Upload = NextUpload;
export default Upload;