组件库开发小记（四）按需加载和发布

Gypsophlia
886 阅读3分钟

组件库开发小记（四）按需加载和发布

这篇的内容围绕按需加载的两种插件的配置，测试npm link和发布来谈。

测试库

这里指的测试是手动全程测试，一般我们会在当前项目中的src中测试，但是此处与组件库同目录，不便测试组件库打包后的内容，因此需要用到软链npm link，来将项目链接到另外一个库中，步骤如下：

  1. 在组件库目录使用npm link，将该组件库的内容安装到了本机的全局模块中。

  2. 切换到另外一个vue项目目录中（可以创建或者使用现有的）

  3. 在该项目目录中使用npm link CreateUI，这里的名字要和组件库的package.json中的name保持一致。

  4. 接下来就可以安装、配置下面的按需加载插件。

  5. 在项目的App.vue中使用按需加载。

如果删除这个组件库的全局包，可以在组件库目录下执行npm unlink。

按需加载插件

使用说明

在使用插件前，我们需要明白使用它的目的和方法，按需加载的插件就是为了在运行项目前对模块引入进行编译，使用的时候一些名称的配置要准确，否则路径不匹配。

例如，将这种形式这种形式进行转化：

import { Chatbox } from "CreateUI"

var Chatbox = require('CreateUI/lib/chatbox')
require('CreateUI/lib/theme/chatbox.css')

而这里的转化一般有两种方式：

  • 样式文件单独存储在theme文件夹中。

  • 样式文件与每个组件一同存储，例如 lib/button/index和lib/button/style.css

babel-plugin-component

这是element-ui 自制的插件，更多用法见GitHub - ElementUI/babel-plugin-component

plugins: [
  [
    "component",
    {
      libraryName: "@gypsophlia/create-ui",    // 定义引入组件库的名称
      styleLibrary: {    
        name: "theme",  // 样式库的名字 => '/lib/theme/xxx.css'
        base: false,    // 是否引入基础样式 => '/lib/theme/base.css'
        // path: "[module]/haha.css" => 'lib/theme/xxx/haha.css'
      },
    },
    // "style" <unset>   => 'stylelibrary/xxx.css' 
    // “style": true     => 'stylelibrary/style.css'
    // "style": filepath =>'stylelibrary/filepath'
  ],
];

可以看到注释的内容后面，在配置后应该转换为了什么样的路径。

需要注意的是：

  • 如上配置适合将样式保存在theme文件夹下，如果分开存放可采用下面的style属性。

  • 若没有设置styleLibrary则，其样式会在lib目录下寻找。

babel-plugin-import

plugins: [
  [
    "import",
    {
      libraryName: "@gypsophlia/create-ui",    // 组件库名
      styleLibraryDirectory: "lib/theme",      // 样式库目录
      // “style" <unset> => 'stylelibrary/xxx'
      // "style": true   => 'stylelibrary/xxx/style'
      // "style": "css"  => 'stylelibrary/xxx/style/css'
    },
  ],
];

这个库的使用，关键在于style的使用，你会发现上面的路径转换并不包含文件后缀，因此你的webpack配置需要支持自动增加这样的后缀，如下；另外一种思路，配置style的函数，但是我发现配置函数并未生效。

resolve: {
  extensions: [".css"];
}

发布库

npm pack命令进行本地模拟打包测试

发布库指的是上传到npm上，在此之前你需要有一个账号。然后按如下步骤 

  1. 修改package.json

    • 删除private: true。

    • 配置name不与现有的包重名，可以去官网查。

  2. 配置.npmignore，添加打包需要忽略的文件。

  3. npm login登录你的账号。

    • 需要将你的源换回来https://register.npmjs.org/

  4. npm publish发布库。

当你想要修改内容的时候，那就执行如下操作：

npm version [patch|minor|major]进行版本检查，具体可见一文搞懂前端组件发布 npm 库 - 掘金

一般直接使用命令npm version patch即可。

相关文章

avatar
文章
阅读
粉丝