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屋！