About module entry es folder usage

[cncolder]

What problem does this feature solve?

So now we use babel-plugin-import to reduce bundle size. The pkg.main and pkg.module entry all point warn.js. There is no way import es6 module.

What does the proposed API look like?

Consider change pkg.module: es? But I'm not sure if work as expect.

pkg.module for rollup or webpack tree shaking. Webpack only bundle referencedd components if correct config. /es/warn.js is useless.

[paranoidjk]

There is no way import es6 module.

babel-plugin-import have a option.libraryDirectory, set it to es, Then you will load es6 modules.

Consider change pkg.module: es? But I'm not sure if work as expect.

Without babel-plugin-import, users have to import scripts and styles manually, it's not very convenient.

[cncolder]

If I import {} from 'antd-mobile' without babel-plugin-import. And put bundle css in html head <link href="//cdn.bootcss.com/antd-mobile/1.4.2/antd-mobile.min.css" rel="stylesheet">.

Webpack understand pkg.module.

[paranoidjk]

It will load antd-mobile/es/index.js, so the js bundle will be huge.

The problem is not what the pkg.es should be point to.

It all because that antd-mobile won't encourage users load component without babel-plugin-import, so both pkg.main and pkg.es need point to a empty warning file, not a real entry.

[cncolder]

It will load antd-mobile/es/index.js, so the js bundle will be huge.

No. Currently it will load antd-mobile/es/warn.js. If change to es. It wont huge bcs tree shaking. This is why there is a field named pkg.module.

Set pkg.module and bring webpack goto find warn.js. it's wrong.

[paranoidjk]

What's your proposal api actually? give some code is better.

My point is:

antd-mobile won't encourage users load component without babel-plugin-import, so both pkg.main and pkg.es need point to a empty warning file, not a real entry. see pkg.module

[cncolder]

痛点少一个是一个！

My point is npm i antd-mobile then enjoy it.

砍掉所有入门的门槛，这些门槛其实都属于高级用法，非必选。

• 没装 babel-plugin-import 打包会大，但是能运行啊，配置对 webpack tree shaking 就行，lodash 也不小，可是人家并没有要求用户一定要装 babel-plugin-lodash，用户想减小打包体积可以深入探索。
• 没配置 webpack resolve ['.web.js'] 没关系，我们内部解决所有后缀 internal resolve web.js suffix #1566 ，入口是 index.js 就对了。
• 没配置 高清方案，画面不够细腻，但是能显示啊，只不过显示的和其他项目一样粗糙一点罢了，但至少其他 CSS 不用去处理，比如用户想用 nprogress，强制高清后用户还得自己写一个 nprogress.hd.css。（这个已经积重难返了）
• 没配置 svg-sprite-loader 没问题啊，Icon 默认改成 <Icon src='//cdn.com/xxx.svg' /> 或者 <Icon src='base64 data uri' />，要使用 type 属性这种高级用法的时候才需要配置 svg-sprite-loader。（这个可能还可以抢救一下）

以上是我认为这个项目目前的四大痛点。

目前的状况是用户想尝试一下，安装以后配置半天还不一定成功，少部分不肯放弃的人跑到这里开 issus 也未必找到解决办法。

[paranoidjk]

你列的四点，后面三点在已经在2.0的改进计划中。

至于 entry 是否要放开限制，也不是不可行，还是个取舍问题，可能减少了入门的咨询，反而增加了后面关于打包后体积很大的咨询量。

除了运行时 console warning，大部分普通用户不会想着去文档里面找按需加载的方案的。

[paranoidjk]

另外，真正在业务上，我认为对移动端来说 antd-mobile 这样的库全量引入基本是不可能的。

所以绝大多数的用户，肯定是需要配置 babel-plugin-import 才对。

[cncolder]

是否全量引入那是用户的事，教会用户怎么用 babel-plugin-import 偷懒不是我们的责任。

关闭 main 入口就是我们的不对了。

[cncolder]

这个用户的心声应该很能说明问题了，antd-mobile 的现状就是：“只想安装一下试试，为什么这么难配置？”

[paranoidjk]

ok, 那我的提议是这样。

保持 main 入口可以正常引用，但在 index.js 里面加 dev warning, 建议用户做按需加载。

@cncolder 你有兴趣来个 PR 吗？

[paranoidjk]

但在 index.js 里面加 dev warning

不判断 dev 环境，就普通 cosole.error, 效果就是线上也要有这个 console warning.

[cncolder]

然后再加一个变量或方法用于关闭 warning 吗？我不认为 warning 有必要。

如果替用户考虑，应该把这几个要点放在根目录的 README.md 里，现在的首页只有LOGO和几个二维码。

参考 material-ui，怎么配置 react-tap-event-plugin，怎么添加字体，基本用法，怎么自定义 theme，简单明了，照着做就能写个按钮打开浏览器看看效果。

[paranoidjk]

然后再加一个变量或方法用于关闭 warning 吗？我不认为 warning 有必要。

我的意思就是这个 warning 是不可关闭的。

我们应该把这几个要点放在根目录的 README.md 里

我们的 Readme 有点像个导航菜单或产品首页，https://github.com/ant-design/ant-design-mobile#install--usage 这里会跳转到真正的使用文档。

[paranoidjk]

就是 ant-design 目前的实现 https://github.com/ant-design/ant-design/blob/master/components/index.tsx#L2

[cncolder]

就是把 introduce.md 的内容复制到外面，放在明面上。

[cncolder]

antd 是对的，尽到提醒义务，要是用户连这个都看不懂，应该也学不会 React（玩笑）。

[paranoidjk]

@cncolder 的确，antd-mobile 的新手友好度和配置复杂度经常被吐槽... 😅 直接 PR 来优化吧 👍

[cncolder]

@paranoidjk 我再继续整理思路，想办法解决前两个问题，你继续解决 npm publish 问题，我在等下一个
1.4+ 版本好验证我的一个想法，alpha也行。

[paranoidjk]

@cncolder publish 的问题先绕过了 5a19d4b 已经发了 1.5.0-alpha.2, 你试用下

具体原因 @yesmeck 在查

[paranoidjk]

close since antd-mobile@2.0 have unlocked this restriction.

https://github.com/ant-design/ant-design-mobile/blob/master/package.json#L31