11月29, 2017

组件打包小记(2)

五月份写过一篇组件打包小记,其实那篇文章只是打包过程中的一小部分而已。我来结合最近所做的一些东西,一定程度上对它深入下。

首先一个项目肯定要有一个demo,然后也要有发布出去的模块。

alt

demo是存放案例的,src里面存放模块代码。

这里有一个考虑是发布的npm不需要demo,所以可以在package.json下配置files的key,如下:

alt

这里补充一下,我们在每次npm publish的时候都需要手动npm run build,这一点非常不人性化。所以我在package.json中加了一个publish的脚本钩子,叫prepublish

"scripts": {
    "prepublish": "npm run build"
  },

当然做更好一些是先remove build文件夹,再构建。

demo这一块有几种做法:

  • 结合markdown方式,就如同ant-design官网那样,能进行demo代码查看及交互
  • 纯粹地效果演示(当然也可以通过pre标签,里面放一些代码示例,但绝逼做不到交互)

第一种,之前写过一篇文章:markdown转react组件

第二种,可以简单写一个spa,然后左侧是菜单,右侧是组件内容。

为了达到多人可以分工协作,所以菜单做成可配置的json对象,组件动态渲染出来就行。

alt

这里可能需要注意的是:require.ensure那一段最后一个参数,我写的是"chunk",那个不能是一个变量,不然会报错。

菜单的json配置参考:

export default [
    {
        name: '按钮',
        router: 'button',
        type: "component",
        componentName: "buttonTest"
    },
    {
        name: '标签页',
        router: 'tab',
        type: "component",
        componentName: "tabTest"
    },
    {
        name: '测试',
        router: 'test',
        componentName: "test"
    }
]

上面的type,我是用来左侧菜单分类的,大家可以根据自己的实际情况来自定义这个config配置。

说完了这些,似乎差不多。但并没有,这样打包出来的,并没有按需加载

antd实现的方式是将:

import { Button } from 'antd';

通过babel-plugin-import这个插件转化为:

import Button from 'antd/lib/button';
import 'antd/lib/button/style';

我们可以简单翻一下源码

添加style那一个import,源码中使用了addSideEffect

alt

另外一个是:

this.selectedMethods[methodName] = addDefault(file.path, path, { nameHint: methodName });

alt

OK。通过babel的转换这个已经基本搞定了。但我个人其实是有一个疑问的,比如说像:

alt

在style目录下有一个index.less和index.css,那么通过style目录,找的是哪个?这个似乎是要使用者的webpack配置决定了吧?

剩下的问题就来了,lib这个目录是怎么打出来的。

我查看ant-design的package.json,它最终publish,会生成三个目录:

alt

搜索了一下它的scripts:

alt

这些似乎都有可能,那么就去antd-tools围观一下吧:

它的这些脚本都会跑这个文件里面来:

alt

就是执行一个gulp的任务。

先看一下pub这个任务吧:

alt

先管compile这个任务,它就是生成lib文件和es文件的:

alt

在回调里面,又执行了pub方法,这个方法有意思了:

alt

alt

简单地说,它就是先生成lib和es文件夹,再通过webpack去打包出来dist文件夹。

不过我暂时不清楚这个es文件夹是用来做什么的,等以后清楚了再另开一篇文章。

es这个文件夹是提供ES6模块的入口,像webpack和rollup都支持ES6模块做一些静态优化(如Tree Shaking和Scope Hoisting),它们都会优先读取package.json中的module字段作为ES6模块的入口。

alt

不过我个人还是不是太理解,希望有一天能明悟吧。

最后感谢源码让我又学到了一些东西,谢谢!!

本文链接:www.my-fe.pub/post/about-component-pack-2.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。