注意事项

2021-09-26

通过 webpack 打包完之后，修改 package.json 的 main 属性为 dist/nick.js，再 publish 到 npm。 外部引用之后，可以直接使用组件。

2021-09-26

调试的时候，修改 package.json 的 main 属性为 index.js，再启动 yarn link。在外部项目中使用 yarn link [package.json.name] 连接组件之后，可以直接在线测试。

2021-09-27

添加了按需加载，执行指令 npm run build:component。这个模式在 Vite 搭建的项目，无法按需加载，需要使用 Vue-CLI 搭建项目。通过 babel-plugin-component 插件实现按需加载，这个插件是 ElementUI 团队开发的，原理是如下：

import { Button } from 'nick-ui'
// 转化为

const Button = require('nick-ui/dist/button')
require('nick-ui/dist/lib-style/button.css')

打包的时候，需要将 entry 入口修改成如下：

entry: {
  'button': './components/Button/index.js',
  'swiper': './components/Swiper/index.js',
  'nick-ui': './index.js'
},

以及要注意分离 css 需要使用到 mini-css-extract-plugin 插件。最终生成的 css 的位置配置如下：

new MiniCssExtractPlugin({
  filename: 'lib-style/[name].css'
})

2021-09-28

添加了 less 作为样式预编译器，引入了 less-loader、less，在 webpack 配置里进行配置。