Ant-design-mobile: About module entry es folder usage
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.
cncolder
All 21 comments
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.
paranoidjk
on 18 Jul 2017
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.
cncolder
on 18 Jul 2017
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.
paranoidjk
on 18 Jul 2017
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.
cncolder
on 18 Jul 2017
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
paranoidjk
on 18 Jul 2017
痛点少一个是一个！
My point is npm i antd-mobile then enjoy it.
砍掉所有入门的门槛，这些门槛其实都属于高级用法，非必选。
- 没装
babel-plugin-import打包会大，但是能运行啊，配置对 webpack tree shaking 就行，lodash也不小，可是人家并没有要求用户一定要装babel-plugin-lodash，用户想减小打包体积可以深入探索。 - 没配置 webpack resolve ['.web.js'] 没关系，我们内部解决所有后缀 #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 也未必找到解决办法。
cncolder
on 18 Jul 2017
你列的四点，后面三点在已经在2.0的改进计划中。
至于 entry 是否要放开限制，也不是不可行，还是个取舍问题，可能减少了入门的咨询，反而增加了后面关于打包后体积很大的咨询量。
除了运行时 console warning，大部分普通用户不会想着去文档里面找按需加载的方案的。
paranoidjk
on 18 Jul 2017
另外，真正在业务上，我认为对移动端来说 antd-mobile 这样的库全量引入基本是不可能的。
所以绝大多数的用户，肯定是需要配置 babel-plugin-import 才对。
paranoidjk
on 18 Jul 2017
是否全量引入那是用户的事，教会用户怎么用 babel-plugin-import 偷懒不是我们的责任。
关闭 main 入口就是我们的不对了。
cncolder
on 18 Jul 2017
这个用户的心声应该很能说明问题了，antd-mobile 的现状就是：“只想安装一下试试，为什么这么难配置？”
cncolder
on 18 Jul 2017
ok, 那我的提议是这样。
保持 main 入口可以正常引用，但在 index.js 里面加 dev warning, 建议用户做按需加载。
@cncolder 你有兴趣来个 PR 吗？
paranoidjk
on 18 Jul 2017
但在 index.js 里面加 dev warning
不判断 dev 环境，就普通 cosole.error, 效果就是线上也要有这个 console warning.
paranoidjk
on 18 Jul 2017
然后再加一个变量或方法用于关闭 warning 吗？我不认为 warning 有必要。
如果替用户考虑，应该把这几个要点放在根目录的 README.md 里，现在的首页只有LOGO和几个二维码。
参考 material-ui，怎么配置 react-tap-event-plugin，怎么添加字体，基本用法，怎么自定义 theme，简单明了，照着做就能写个按钮打开浏览器看看效果。
cncolder
on 18 Jul 2017
然后再加一个变量或方法用于关闭 warning 吗？我不认为 warning 有必要。
我的意思就是这个 warning 是不可关闭的。
我们应该把这几个要点放在根目录的 README.md 里
我们的 Readme 有点像个导航菜单或产品首页，https://github.com/ant-design/ant-design-mobile#install--usage 这里会跳转到真正的使用文档。
paranoidjk
on 18 Jul 2017
就是 ant-design 目前的实现 https://github.com/ant-design/ant-design/blob/master/components/index.tsx#L2
paranoidjk
on 18 Jul 2017
就是把 introduce.md 的内容复制到外面，放在明面上。
cncolder
on 18 Jul 2017
antd 是对的，尽到提醒义务，要是用户连这个都看不懂，应该也学不会 React（玩笑）。
cncolder
on 18 Jul 2017
@cncolder 的确，antd-mobile 的新手友好度和配置复杂度经常被吐槽... 😅 直接 PR 来优化吧 👍
paranoidjk
on 18 Jul 2017
@paranoidjk 我再继续整理思路，想办法解决前两个问题，你继续解决 npm publish 问题，我在等下一个
1.4+ 版本好验证我的一个想法，alpha也行。
cncolder
on 18 Jul 2017
@cncolder publish 的问题先绕过了 https://github.com/ant-design/ant-design-mobile/commit/5a19d4bb536321ea0150fba2327548b152c46526 已经发了 1.5.0-alpha.2, 你试用下
具体原因 @yesmeck 在查
paranoidjk
on 18 Jul 2017
close since [email protected] have unlocked this restriction.
https://github.com/ant-design/ant-design-mobile/blob/master/package.json#L31
paranoidjk
on 4 Aug 2017
Related issues
myLazyProgrammer
·
4Comments
subject17
·
5Comments
jkvim
·
4Comments
zhangshuaidan
·
3Comments
SturdyCat
·
4Comments
Most helpful comment
痛点少一个是一个！
My point is
npm i antd-mobilethen enjoy it.砍掉所有入门的门槛，这些门槛其实都属于高级用法，非必选。
babel-plugin-import打包会大，但是能运行啊，配置对 webpack tree shaking 就行，lodash也不小，可是人家并没有要求用户一定要装babel-plugin-lodash，用户想减小打包体积可以深入探索。nprogress.hd.css。（这个已经积重难返了）svg-sprite-loader没问题啊，Icon 默认改成<Icon src='//cdn.com/xxx.svg' />或者<Icon src='base64 data uri' />，要使用 type 属性这种高级用法的时候才需要配置svg-sprite-loader。（这个可能还可以抢救一下）以上是我认为这个项目目前的四大痛点。
目前的状况是用户想尝试一下，安装以后配置半天还不一定成功，少部分不肯放弃的人跑到这里开 issus 也未必找到解决办法。