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函数未定义

clipboard.png

是我哪里没有配置好么?

控制台直接调用是有的

clipboard.png

/———————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。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注