参考地址：

经过前面的学习，我们来实践下配置vue文件的打包环境，并进行使用

基本插件安装及打包配置

使用命令方式进行打包

  1. "scripts": {
  2.     "dev": "rollup -wc rollup.config.js",
  3.     "build": "rollup -c rollup.config.js",
  4.     "build:prod": "rollup -c rollup.config.prod.js"
  5.   },  
  6. "devDependencies": {
  7.     "@babel/core": "^7.12.3",
  8.     "@babel/preset-env": "^7.12.1",
  9.     "@babel/plugin-transform-flow-strip-types": "^7.12.1",
  10.     "rollup": "^2.33.1",
  11.     "rollup-plugin-babel": "^4.4.0",
  12.     "rollup-plugin-buble": "^0.19.8",
  13.     "rollup-plugin-commonjs": "^10.1.0",
  14.     "rollup-plugin-json": "^4.0.0",
  15.     "rollup-plugin-node-resolve": "^5.2.0"
  16.   },
  1. // rollup.config.js
  2. const path = require('path')
  3. const resolve = require('rollup-plugin-node-resolve')
  4. const commonjs = require('rollup-plugin-commonjs')
  5. const json = require('rollup-plugin-json')
  6. const babel = require('rollup-plugin-babel')
  8. const pathResolve = p => path.resolve(__dirname, p)
  10. module.exports = {
  11.   input: pathResolve('./src/index.js'),
  12.   output: [{
  13.     file: pathResolve('./dist/datav.js'),
  14.     format: 'umd',
  15.     name: 'datav'
  16.   }, {
  17.     file: pathResolve('./dist/datav.es.js'),
  18.     format: 'es',
  19.     name: 'datav'
  20.   }],
  21.   //! 注意插件加载顺序
  22.   plugins: [
  23.     resolve(),
  24.     json(),
  25.     babel({
  26.       exclude: 'node_modules/**'
  27.     }),
  28.     commonjs(),
  29.   ]
  30. }

常见错误：
参考地址：https://blog.csdn.net/weixin_34037173/article/details/91473658
插件的加载顺序需要注意一下，不然有时候报错，搞不明白为什么

配置开发生产环境打包配置

目前主要需要解决的就是代码压缩问题，我们都知道开发环境都是以min.js结尾的文件，是经过压缩的，我们配置下生产环境的打包配置，和开发环境区分开。

  1. // package.json
  2. {
  3.   "name": "rollup",
  4.   "version": "1.0.0",
  5.   "main": "index.js",
  6.   "license": "MIT",
  7.   "scripts": {
  8.     "dev": " rollup -wc rollup.config.js --environment NODE_ENV:development ",
  9.     "build": "rollup -c rollup.config.js --environment NODE_ENV:development ",
  10.     "build:prod": "rollup -c rollup.config.js --environment NODE_ENV:production"
  11.   },
  12.   "devDependencies": {
  13.     "@babel/core": "^7.12.3",
  14.     "@babel/plugin-transform-flow-strip-types": "^7.12.1",
  15.     "@babel/preset-env": "^7.12.1",
  16.     "cross-env": "^7.0.2",
  17.     "rollup": "^2.33.1",
  18.     "rollup-plugin-babel": "^4.4.0",
  19.     "rollup-plugin-buble": "^0.19.8",
  20.     "rollup-plugin-commonjs": "^10.1.0",
  21.     "rollup-plugin-json": "^4.0.0",
  22.     "rollup-plugin-node-resolve": "^5.2.0",
  23.     "rollup-plugin-terser": "^7.0.2"
  24.   },
  25.   "dependencies": {
  26.     "sam-test-data": "^0.0.5"
  27.   }
  28. }
  1. // rollup.config.js
  2. const path = require('path')
  3. const resolve = require('rollup-plugin-node-resolve')
  4. const commonjs = require('rollup-plugin-commonjs')
  5. const json = require('rollup-plugin-json')
  6. const babel = require('rollup-plugin-babel')
  7. const { terser } = require('rollup-plugin-terser')
  8. const pathResolve = p => path.resolve(__dirname, p)
  10. const outputOptions = require('./rollup-output-options')
  12. const isProd = process.env.NODE_ENV == 'production'
  14. // 通用的插件
  15. const basePlugins = [
  16.   resolve(),
  17.   json(),
  18.   babel({
  19.     exclude: 'node_modules/**'
  20.   }),
  21.   commonjs(),
  22. ]
  23. // 开发环境需要使用的插件
  24. const devPlugins = []
  25. // 生产环境需要使用的插件
  26. const prodPlugins = [
  27.   terser({
  28.     output: {
  29.       ascii_only: true // 仅输出ascii字符
  30.     },
  31.     compress: {
  32.       pure_funcs: ['console.log'] // 去掉console.log函数
  33.     }
  34.   })
  35. ]
  36. let plugins = [...basePlugins].concat(isProd ? prodPlugins : devPlugins)
  38. let config = {
  39.   input: pathResolve('./src/index.js'),
  40.   output: outputOptions,
  41.   //! 注意插件加载顺序
  42.   plugins: plugins
  43. }
  45. module.exports = config
  1. // rollup-output-options.js
  2. const path = require('path')
  3. const pathResolve = p => path.resolve(__dirname, p)
  5. const builds = [{
  6.   file: pathResolve('./dist/datav.js'),
  7.   format: 'umd',
  8.   name: 'datav',
  9.   globals: {
  10.     vue: 'Vue'
  11.   },
  12.   env: 'development'
  13. }, {
  14.   file: pathResolve('./dist/datav.es.js'),
  15.   format: 'es',
  16.   name: 'datav',
  17.   env: 'development'
  18. }, {
  19.   file: pathResolve('./dist/datav.min.js'),
  20.   format: 'umd',
  21.   name: 'datav',
  22.   globals: {
  23.     vue: 'Vue'
  24.   },
  25.   env: 'production'
  26. }, {
  27.   file: pathResolve('./dist/datav.es.min.js'),
  28.   format: 'es',
  29.   name: 'datav',
  30.   env: 'production'
  31. }]
  32. let output = builds.filter(item => {
  33.   return item.env == process.env.NODE_ENV
  34. })
  35. module.exports = output

配置打包vue文件

我们要配置的是vue3的打包环境，下面开始

  • 安装所需要的插件：

    1. yarn add -D rollup-plugin-vue rollup-plugin-postcss  @vue/compiler-sfc sass

  • 在通用插件中加入我们的插件 ```javascript const vue = require(‘rollup-plugin-vue’) const postcss = require(‘rollup-plugin-postcss’)

// 通用的插件 const basePlugins = [ resolve(), json(), vue(), babel({ exclude: ‘node_modules/**’ }), commonjs(), postcss() ]

  2. - 编写vue组件
  3. ```javascript
  4. // src/Test.vue
  5. <template>
  6.   <div class="test">
  7.     <div>{{ message }}</div>
  8.     <div>count:{{ count }}</div>
  9.     <div>double:{{ doubleCount }}</div>
  10.     <button @click="handleClick">点击看double效果</button>
  11.   </div>
  12. </template>
  14. <script>
  15. import { computed, ref } from 'vue';
  16. export default {
  17.   name: 'TestComponent',
  18.   setup() {
  19.     const message = 'hello world';
  20.     const count = ref(1);
  21.     const doubleCount = computed(() => count.value * 2);
  22.     const handleClick = () => {
  23.       count.value++;
  24.     };
  25.     return {
  26.       message,
  27.       count,
  28.       doubleCount,
  29.       handleClick,
  30.     };
  31.   },
  32. };
  33. </script>
  34. <style lang="scss" scoped>
  35. .test {
  36.   color: red;
  37. }
  38. </style>
// src/index.js
import Test from "./Test.vue";
export default function (Vue) {
  Vue.component(Test.name, Test)
}

  • 打包我们的库文件

    yarn build
yarn build:prod

  • 在页面中进行使用

    // example/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>datav libs example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/vue.global.js"></script>
<script src="../dist/datav.js"></script>
</head>
<body>
<div id="app">
  {{massage}}
  <test-component/>
</div>
<script>
  Vue.createApp({
    setup() {
      var massage = 'hello world'
      return {
        massage
      }
    }
  }).use(datav).mount('#app')
</script>
</body>
</html>