[WIP] add typescript path mapping sample for mixed web&rn

[cncolder]

ant-design/ant-design-mobile#1557

Hey @paranoidjk . Checkout this and open in vscode. Hold ⌘ then click List Flex in native.tsx web.tsx. The editor jump to the right .d.ts. files.

ref https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

[cncolder]

我记得 @bccsafe 曾经努力拆分 native/web 类型定义，如果这个例子对于使用 typescript + react-native 的用户可行的话，我们只需要添加一个文件 antd-mobile/components/native.tsx，导出所有不带 .web 后缀的类型，之后就可以大胆的拆分了。

ref ant-design/ant-design-mobile#1557

[paranoidjk]

@bccsafe 先看下，我今天休假了。

[paranoidjk]

@cncolder 我测试的确可以跳到对应的 index.web.d.ts, index.d.ts, 但是 F12 跳转还是不对的

[paranoidjk]

@cncolder 假如按你这个方案，使用web组件的用户无需做特殊配置，使用rn组件的用户需要在他的项目根目录增加 tsconfig.json 里配置 paths?

[cncolder]

@paranoidjk 这要看2.0的重心放在哪儿，目前整个项目可以说是 rn 优先，所有的痛点都指向 web 用户。

如果先前取消 .web 后缀 添加 .native 后缀的计划还要继续进行的话，那就尽量降低 web 用户的门槛，把任何额外的配置都推给 rn 用户。

同时我还有一个大胆的想法，以现存的 .web 后缀为例，假如我们在根目录下生成一个 web 文件夹，里面的文件结构和 lib 一致，其中的每个文件都是像这样只有一行 export { default as List } from '../lib/list/index.web' 那我们的 web 用户只要 import { List } from 'antd-mobile/web' 就行了，babel 配置再改一下：

{
    "plugins": [
        [
            "import",
            [
                {
                    "libraryName": "antd-mobile/web",
                    "libraryDirectory": "",
                }
            ]
        ]
    ]
}

要解决 es module 可能要在 web 文件夹里分成 lib 和 es 两个文件夹。

.native 后缀同理

[paranoidjk]

那就尽量降低 web 用户的门槛，把任何额外的配置都推给 rn 用户。

这个我 +1

import { List } from 'antd-mobile/web'

这个 -1 ，antd-mobile 的出发点就是希望抹平 native 和 web 的差异

[cncolder]

antd-mobile 的出发点就是希望抹平 native 和 web 的差异

懂了，提供一个再抹平一点方法：babel-plugin-transform-imports

这个包比现在的 babel-plugin-import 好的地方是生成的路径更灵活，我们可以借鉴一下。

    {
        "plugins": [
            ["transform-imports", {
                "antd-mobile": {
                    "transform": "antd-mobile/lib/${member}/index.web",
                    "snakeCase": true
                }
            }]
        ]
    }

umijs/babel-plugin-import#116 和这个思路一致。

一个 React 项目从源码到构建大体上也就下面这几步

typescript --> [tsc] --> es2015+ --> [babel] --> es5+polyfill --> [webpack] --> bundle

能在 babel 层面解决的就不推给 webpack，例如 .web.js svg-sprite
要是问题都上浮到 typescript，那就没问题了（不过不太可能）。

[paranoidjk]

close. Since we do not need this right now.