vue.js - Vue 项目中如何才能只打包 .vue 文件用于非 webpack 打包项目中注册和使用组件?
问题描述
团队里在做基于vue
的组件库,开发的时候用的是vue-cli
,现在想打包成一个js
文件,能够先支持在页面上标签引入,想请问一下应该怎么做?谢谢
/--------------update-------------/
我重新写了一个webpack.config.js
var path = require('path')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'src': resolve('./src'),
'components': resolve('src/components'),
'assets': resolve('src/assets'),
'utils': resolve('src/utils')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
externals: {
'vue': {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
},
'lodash': {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_'
}
}
}
然后因为我在组件库中用了Vue.extend
函数,现在在引用打包出来的js文件会报错,说extend
函数未定义
是我哪里没有配置好么?
控制台直接调用是有的
/---------------------solved-------------/
在仔细看了@KingMario的答案之后终于搞定了。
在和package.json
同级新建webpack.config.js
,内容如下:
var path = require('path')
var webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bk-magicbox.js',
library: 'bkMagic',
libraryTarget: 'umd'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'src': resolve('src'),
'components': resolve('src/components'),
'assets': resolve('src/assets'),
'utils': resolve('src/utils')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
externals: {
'vue': {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
},
'lodash': {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
})
]
}
基本上是最简的配置了,入口文件是之前写好的注册组件,可以参考饿了么的Vue
组件中的配置文件:传送门
上面提到的Vue.extend
函数未定义其实原因很简单,我配置了library
但是没有配置libraryTarget
,然后Webpack
使用了默认配置libraryTarget: 'var'
导致的出错。
新建一个 components.js 文件,在该文件中 export 所有需要使用的组件 vue
export a from 'path/to/a.vue'
export b from 'path/to/b.vue'
// ...
然后在 webpack 中设置 entry 为该 components.js 文件,打包即可
如果需要直接在 js 中使用 Vue.component('a', components.a) 来注册,在 webpack 的 output 中需要添加 library 选项,参见:Authoring Libraries,此时还可以设置
librarytarget 为 umd 用于各种环境
组件库中调用 Vue.extend 的话,同样也需要 import Vue,同时要在 webpack 中配置 externals。
这篇关于vue.js - Vue 项目中如何才能只打包 .vue 文件用于非 webpack 打包项目中注册和使用组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!