以下是我摸索的步骤,但是不是完美的,不知道有没有人有更完美的步骤呢?可以指点下,我的qq是295183917
vue create 项目名 新建一个工程,选择vue3和typescript
在components文件夹下创建组件,用vue3+ts的写法,这个我具体不写了。同时创建一个index.ts文件作为入口文件
我这个库依赖了vant的库,我们可以npm i vant@next -D安装vant
注意是-D不是-S,就是打包的时候不打包vant库。如果你还要依赖其他的库,你也都用-D安装进去,同时把之前的vue库也移动到devDependencies里面去。
我使用了最简单的配置,把我的两个自定义组件引入
export { default as ZLImage } from './ZLImage.vue'
export { default as ZLText } from './ZLText.vue'
webpack打包配置,配置入口文件,就是你components的index.ts文件,输出目录在dist文件夹,解析less,ts等文件使用的loader等等
entry: './src/components/index.ts', // 入口文件,就是上步骤的src目录下的index.js文件,
output: {
path: path.resolve(__dirname, './dist'), // 输出路径,就是上步骤中新建的dist目录,
publicPath: '/dist/',
filename: 'ZLUI.min.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}, {
test: /\.[js|ts]$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'
}, {
test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
loader: 'url-loader',
query: {
limit: 30000,
name: '[name].[ext]?[hash]'
}
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
package.json配置
"peerDependencies": {
"vant": ">=3.0.0",
"vue": ">=3.0.0"
},
build名字更改为:
--target lib 指以库的形式打包
--name ZLUI 打包后文件名字 ZLUI.umd.min.js
最后一个是打包的入口文件 src/components/index.ts
"build": "vue-cli-service build --target lib --name ZLUI src/components/index.ts",
打包完在dist目录就生成了ZLUI.umd.js和ZLUI.common.js
我这边是手动生成的,不知道各位有什么自动生成方法?借助了工具vue-dts-gen。两个组件各生成两个.d.ts文件,然后在dist目录下创建一个index.d.ts文件,把那两个.d.ts的文件里面的代码都拷贝进去,合成一个文件。当然,export导出的名字要修改下。
配置package.json
"name": "你的库在npm上的名字",
"version": "0.0.1",
"private": false, // 一定要改成false
"description": "你的库的简介",
"author": "作者名字",
"main": "dist/hsrc-ui.umd.js", // 库的主入口,一定要设置
"module": "dist/hsrc-ui.umd.js", // moudle入口,一定要设置
"types": "dist/index.d.ts", // 重点,ts的库一定要写,声明文件为index.d.ts
"license": "MIT",
"files": [
"dist" // 重点,上传的时候只上传dist文件夹的内容
],
最后npm publish就可以了。大功告成!
1. 引入只能 import { xxx } from 'xxx'引入,不能像vant一样通过app.use(xxx)引入,不知道谁懂得插件形式引入的,麻烦加我QQ指点下。
2. 目前还是手动生成ts声明文件,不知道如何自动生成。谁会编写脚本的麻烦也告诉我下。
3. 在组件内部不能使用main.ts定义的全局过滤器
app.config.globalProperties.$filters = { formatDate (timeStamp: number) { return dayjs(timeStamp).format('YYYY-MM-DD') } }
不知道有什么方法使用组件内部的过滤器
4. 目前所有组件都打包在一个umd.js文件里了,希望向elementui那样dist文件夹内一个组件一个文件夹,里面有js文件和.d.ts文件,还没研究出怎么配置
附图,element-ui打包后的dist文件夹