首页 > 其他分享 >rollup 打包按需引入

rollup 打包按需引入

时间:2023-06-30 11:34:49浏览次数:32  
标签:vue plugin rollup terser 引入 import true 打包

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser'; // 一款基于 UglifyJS 的 JavaScript 压缩工具
import vue from 'rollup-plugin-vue';
import postcss from 'rollup-plugin-postcss';

const plugins = [
  vue({
    css: true, // 将 CSS 提取为单独的文件进行输出
    template: { isProduction: true } // 设置模板选项,以便在生产环境中移除注释和空格
  }),
  postcss({
    // PostCSS 插件配置,用于处理 CSS
    modules: true
  }),
  resolve(),
  commonjs(),
  babel(),
  terser()
]

export default {
  input: 'src/components/index.js', // 入口文件
  output: {
    dir: 'dist', // 输出目录
    format: 'esm', // 输出格式
    entryFileNames: '[name].mjs', // 入口文件名
    exports: 'named', // 导出类型
    preserveModules: true, // 保留模块结构
    globals: {
      vue: 'Vue' // 将 Vue 模块设置为全局变量 Vue
    },
  },
  plugins,
  external: ['vue', 'style-inject', 'node_moules'],
};

 

标签:vue,plugin,rollup,terser,引入,import,true,打包
From: https://www.cnblogs.com/dcyd/p/17516173.html

相关文章

  • uniapp 引入非模块化js
    uniapp开发的H5,引入第三方的非模块化.js文件,如self.js,就是纯js文件,没有module.exports暴露出来成为一个对象,这种放在common文件夹下,引入会提示找不到,这时候应该把该self.js放在static文件夹下,uniapp发行H5时static文件下的内容不编译,在并在入口.html文件中引入全局js,在.vue页......
  • CSS(一)CSS引入方式
    内联样式在html标签内使用属性style,style属性可以包含任何css属性。直观但不利于维护,不推荐<pstyle="font-size:medium;">css内联样式</p>内部样式在html文件头部声明样式,是这个HTML文件都可以使用,但是不能作用于其他HTML文件<head>  <title>Document</title>  <......
  • python打包exe总结 pyinstaller py2exe
    Python打包exe有挺多可以用的如pyinstallerpy2exe cx_Freezenuitkapy2apppy0xidizer cx_Freeze和nuitka没用过py2app是打包Mac程序的py0xidizer是打包嵌入式的占用空间少感兴趣可以自行了解 这篇文章记录一下pyinstaller和py2exe的用法 以便以后查找  注:以下都......
  • idea springboot本地打包配置
    cleanpackage-plrenren-admin-am-amd......
  • 自用gulp打包脚本,压缩html,压缩js,压缩css,压缩图片,功能齐全
    constgulp=require('gulp');constfs=require('fs');consthtmlmin=require('gulp-htmlmin');constuglify=require('gulp-uglify');constuglifyEs=require('uglify-es');constminifyCSS=require(......
  • 前端打包部署后接口BASE_URL不对问题解决办法
    在前端打包部署时,为了免去不同环境打包的麻烦,项目用的流水线触发方式。在这里不细说,重点说说下面情况。当项目提交打包部署后,访问压测环境或者生产环境的地址来使用项目时,发现接口报错404。 在NETWORK里发现接口的BASEURL和当前环境需要调用的后端baseurl不同。主要问题在于......
  • nextjs项目引入vconsole报错处理:ReferenceError: window is not defined
    引入文件(nextjs项目):importVconsolefrom'vconsole'报错: 处理:letVconsoleif(typeofwindow!=='undefined'){Vconsole=require('vconsole')}打开调试:if(typeofwindow!=='undefined'){//加了一个打开调试......
  • 2023.6.28 - vue项目打包内存堆栈溢出JS stacktrace
    vue项目打包时报错,JSstacktrace:ReachedheaplimitAllocationfailed-JavaScriptheapoutofmemory这是因为node打包时是有内存空间限制的,node能分配多少空间,默认是根据电脑内存占比来算的。在内存比较小的电脑里,默认分配给node的内存可能不足以支撑起项目运行或者打包......
  • Docker通过build打包镜像--九五小庞
    -----------------------------------------通过build打包镜像,执行此命令需要创建Dockerfile文件,打包时,通过文件中指定的内容打包生成镜像dockerbuild-tsaas-pacs:1.1.1.运行容器dockerrun-itd-p18080:8080-p19527:9527-p18006:8006-p18007:8007-v/home/pxy/D......
  • maven 打包源代码
    前言maven"内置插件"中没有打包源代码的插件,所以,需要开发者配置插件。apache提供了maven-source-plugin插件用于打包源代码。maven-source-pluginTheSourcePluginhasfivegoals:source:aggregate aggregratessourcesforallmodulesinanaggregatorproject.source:jar i......