vue2-components/build/rollup.config.js

vue2 components package

import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
// import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
// import async from 'rollup-plugin-async'
import { babel } from '@rollup/plugin-babel';
import vueJsx from "rollup-plugin-vue-jsx-compat"
import esbuild from "rollup-plugin-esbuild";

export default {
  input: 'src/wrapper.js', // Path relative to package.json
  output: {
    name: 'MyComponent',
    exports: 'named',
  },
  plugins: [
    commonjs(),
    vueJsx(),
    esbuild({
      jsxFactory: "vueJsxCompat",
    }),
    vue({
      css: true, // Dynamically inject css as a <style> tag
      compileTemplate: true, // Explicitly convert template to render function
    }),
    babel({
      exclude: 'node_modules/**',
      // extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
      // // presets: ["@vue/babel-preset-jsx"],
      // presets: [
      //   '@vue/babel-preset-jsx',
      //   [
      //     '@babel/env', {
      //       'modules': false,
      //     },
      //   ],
      // ],
    })
    // async(),
    // buble({
    //   transforms: {
    //     generator: false,
    //   },
    //   objectAssign: 'Object.assign'
    // })
    // buble(), // Transpile to ES5
  ],
  // transforms: { generator: false }
};



// import {camelCase} from 'lodash'
// import babel from 'rollup-plugin-babel'
// //import { babel } from '@rollup/plugin-babel'
// import commonjs from '@rollup/plugin-commonjs'
// import json from '@rollup/plugin-json'

// import resolve from '@rollup/plugin-node-resolve'
// import replace from '@rollup/plugin-replace' // 打包时替换代码中的指定字符串
// import vue from 'rollup-plugin-vue'
// import postcss from 'rollup-plugin-postcss'
// import filesize from 'rollup-plugin-filesize' // 显示打包文件大小
// import {terser} from 'rollup-plugin-terser' // 代码压缩

// import pack from './package.json'

// const projectName = pack.name
// const sass = require('node-sass')
// const path = require('path')

// // compute globals from dependencies
// // const globals =
// //   pack.dependencies &&
// //   Object.assign(
// //     {},
// //     ...Object.keys(pack.dependencies).map((key) => ({
// //       [key]: camelCase(key),
// //     }))
// //   )

// const builds = {
//   // (CommonJS). Used by bundlers e.g. Webpack & Browserify
//   cjs: {
//     entry: 'src/index.js',
//     dest: `dist/${projectName}.common.js`,
//     format: 'cjs',
//   },
//   // (ES Modules). Used by bundlers that support ES Modules,
//   // e.g. Rollup & Webpack 2
//   esm: {
//     entry: 'src/index.js',
//     dest: `dist/${projectName}.esm.js`,
//     format: 'es',
//   },
//   // build (Browser)
//   'umd-dev': {
//     entry: 'src/index.umd.js',
//     dest: `dist/${projectName}.js`,
//     format: 'umd',
//     env: 'development',
//   },
//   // production build (Browser)
//   'umd-prod': {
//     entry: 'src/index.umd.js',
//     dest: `dist/${projectName}.min.js`,
//     format: 'umd',
//     env: 'production',
//   },
// }

// const processSass = function(context) {
//   return new Promise((resolve, reject) => {
//     sass.render(
//       {
//         file: context,
//       },
//       function(err, result) {
//         if (!err) {
//           resolve(result)
//         } else {
//           reject(err)
//         }
//       }
//     )
//   })
// }

// function genConfig(name) {
//   // const opts = builds[name]
//   const config = {
//     input: 'src/wrapper.js', // Path relative to package.json
//     output: {
//       name: 'MyComponent',
//       exports: 'named',
//     },
//     // input: opts.entry,
//     external: (id) => pack.dependencies && pack.dependencies[id], // exclude dependencies from build
//     plugins: [
//       vue({compileTemplate: true, css: true}),
//       babel({
//         runtimeHelpers: true,
//         exclude: 'node_modules/**',
//       }),
//       resolve({
//         browser: true,
//         preferBuiltins: false,
//         extensions: ['.js', '.json', '.jsx', '.vue'],
//       }),
//       commonjs(),
//       json(),

//       postcss({
//         minimize: true,
//         extensions: ['.css', '.scss'],
//         process: processSass,
//         extract: path.resolve(`dist/style/${projectName}.css`)
//       }),

//       filesize(),
//     ]//.concat(opts.plugins || []),
//     // output: {
//     //   exports: 'named',
//     //   file: opts.dest,
//     //   format: opts.format,
//     //   // define globals in window from external dependencies
//     //   globals,
//     //   name: opts.moduleName || projectName,
//     // },
//   }

//   // if (opts.env) {
//   //   config.plugins.push(
//   //     replace({
//   //       'process.env.NODE_ENV': JSON.stringify(opts.env),
//   //     })
//   //   )

//   //   // minify on production targets
//   //   if (opts.env === 'production') {
//   //     config.plugins.push(terser())
//   //   }
//   // }

//   Object.defineProperty(config, '_name', {
//     enumerable: false,
//     value: name,
//   })

//   return config
// }

// const target = process.env.TARGET || 'umd-prod'
// module.exports = genConfig(target)