推荐最新

rollup多入口的公共部分怎样才能不提取成单独文件？

如何将多入口共同引用过的文件中的内容分别写进各入口内部，而不是作为一个单独文件输出？比如： // util.js export function fun(){}; // a.js import { fun } from './util.js' fun(); function a(){}; a(); // b.js import { fun } from './util.js' fun(); function b(){}; b(); 希望生成： // a-bundle.js function fun(){}; // 来自 util function a(){}; // 来自 a.js 自身 fun(); a(); // b-bundle.js function fun(){}; // 来自 util function b(){}; // 来自 b.js 自身 fun(); b(); // util.js // 不要了

浏览量265

Mia好纠结

vite分包，如何控制css文件的加载顺序？

环境: vite2.9 + vue3 vben框架 vite使用了分包 rollupOptions: { manualChunks(id) { if (id.includes('node_modules')) { return 'vendor'; } }, }, 会多出一个vendor.xxx.js 以及 vendor.xxx.css; 然后再注入到index.html的时候，会先导入vendor.xxx.css 然后再注入index.xxx.css,"加载顺序示例" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240928/5fc673d7e486da16a394e2f69842073c.png)这就导致了第三方库的一些样式被后面的index.xxx.css所覆盖，这种如何解决我再plugin中，改变了之前的css的加载顺序，结果不尽人意，无法改变这种注入的顺序

浏览量216

NKTDYD

使用 Rollup 打包 Vue3 + TypeScript 组件库时遇到 '@vue/compiler-sfc' 报错如何解决？

rollup 打包vue3 + ts 组件库报错 [@vue/compiler-sfc] No fs option provided to "compileScript" in non-Node environment. File system access is required for resolving imported types. 重新安装依赖，更换rollup-plugin-vue版本。 import { computed, withDefaults } from 'vue'; import { Watermark, type WatermarkProps } from 'ant-design-vue'; defineOptions({ name: 'WaterMarkComp' }); const defaultColor = 'rgba(0, 0, 0, .08)'; // rollup 打包报错 const props = withDefaults(defineProps(), { gap: () => [50, 80], rotate: -20, font: () => ({ color: defaultColor, fontSize: 20 }), user: () => ({ nickname: '', mobile: ''}) }); // rollup 正确运行 // const props = defineProps({ // gap: { // type: Object, // default: () => [50, 80] // }, // rotate: { // type: Number, // default: -20 // }, // font: () => ({ // color: defaultColor, // fontSize: 20, // }), // user: { // type: Object, // default: () => ({ nickname: '', mobile: ''}) // } // }); const defaultPrams = computed(() => { const { nickname = '', mobile = '' } = props.user || {}; const suffixAfter = `${mobile}`.slice(-4); return { ...props, font: { color: defaultColor, ...props.font }, content: `${nickname} ${suffixAfter}` }; }); .water-mark { box-sizing: border-box; width: 100%; height: 100%; } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/f162818844dd90b85c4c0641f8ae789d.png) rollup 配置 import { defineConfig } from 'rollup'; import nodeResolve from '@rollup/plugin-node-resolve'; // 找到模块并打包它们 import path from 'path'; import commonjs from '@rollup/plugin-commonjs'; import json from '@rollup/plugin-json'; // 它允许 Rollup 从 JSON 文件中导入数据。 import babel from '@rollup/plugin-babel'; // 它允许 Rollup 从 JSON 文件中导入数据。 import terser from '@rollup/plugin-terser'; import alias from "@rollup/plugin-alias"; import rollUpTypescript from 'rollup-plugin-typescript2'; import progress from 'rollup-plugin-progress'; import postcss from 'rollup-plugin-postcss' import vuePlugin from 'rollup-plugin-vue'; // import less from 'rollup-plugin-less'; import clear from 'rollup-plugin-clear'; // import css from 'rollup-plugin-css-only'; import packageJson from "./package.json"; // assert { type: "json" }; // const packageJson = require('./package.json'); import { fileURLToPath } from 'url'; // import eslint from "@rollup/plugin-eslint"; // import { getFileList } from './build/file.build.ts'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const pathResolve = (p) => path.resolve(__dirname, p); const extensions = ['.js', '.jsx', '.ts', '.tsx']; const globalsConfig = { 'vue': "Vue", 'lodash-es': 'lodashEs', 'tyndSchema': 'TyndSchema', 'ant-design-vue': 'antDesignVue' }; export default defineConfig({ input: 'src/index.ts', external: ['lodash-es', 'vue', 'ant-design-vue'], // 依赖模块 output: [ { // dir: 'dist', file: packageJson.main, format: 'cjs', banner: '/* this is jiangshan webgroup components ' + '1.0.1' + ' */', footer: '/* this author is beisir */', globals: globalsConfig // assetFileNames: '[name]-[hash][extname]', // chunkFileNames: '[name]-[hash].js', // entryFileNames: 'dist/index-[name].cjs.js' // sourcemap: true, // exports: 'auto' }, { name: 'ui-schema', file: packageJson.module, format: 'es', globals: globalsConfig, }, { name: 'ui-schema', // 当入口文件有export时，'umd'格式必须指定name file: 'dist/index-umd.js', format: 'umd', globals: globalsConfig, }, { file: 'dist/index-min.js', format: 'iife', name: 'tyndSchemaMin', plugins: [terser()], globals: globalsConfig } ], // acornInjectPlugins: [jsx()], plugins: [ clear({ targets: ['dist'], verbose: true, before: true }), rollUpTypescript({ // check: false useTsconfigDeclarationDir: true // 示使用根目录的文件作为 typescript 编译配置文件 }), // css({ output: 'bundle.css' }), // eslint({ // throwOnError: true, // include: ['src/**/*.ts'], // exclude: ['node_modules/**', 'lib/**'], // }), nodeResolve({ extensions: extensions }), alias({ entries: { "@": pathResolve("src"), _: __dirname, }, }), vuePlugin({ target: 'browser' }), // less(), postcss({ extensions: ['.css', '.less'], extract: 'css/index.css', // use: ['less'], // modules: true }), commonjs(), babel({ // 使用 Babel 将 JSX 和 Flow 转换为 JavaScript // babelHelpers: 'runtime', babelHelpers: 'bundled', extensions: extensions, exclude: 'node_modules/**' }), json(), progress({ clearOnComplete: false }) ] });

浏览量169

你好我叫张倩话

rollup打包ts，生成多种模块格式，如何只生成一份声明文件？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240917/94bd83f0351346c23d7c1ea9efc38d3d.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240917/f2641f8d38b9150d2689b55cf931edeb.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240917/85cfee3830d4ca2fc87ffab37b91442b.png) 这样并没有在dist目录下生成一个types文件夹，而是在每个模块下都生成了一个types文件夹，造成声明文件重复，请问如何设置才能只在dist文件夹下生成一个声明文件呢？

浏览量154

M78的社畜

通过vite中rollup打包，如何对lodash做按需打包？

通过vite中rollup打包，如何对lodash做按需打包？ import {throttle} from 'lodash' import throttle from 'lodash/throttle' 这两种写法在build时第一种dist体积比第二种要大。都说是第一种写法是将整个lodash打包进了dist。我这里有一个疑问，rollup在build时不是会对代码做按需打包吗？ rollup的树摇不会起作用吗？假设整个项目只使用了一个throttle函数，也会将整个lodash打包到dist吗？虽然lodash是 cjs规范的，我理解在编译是应该会被转换成esm。 node_modules/lodash包里每个函数都是单独文件，在node_modules/lodash/index.js里仅仅对这些文件做了集合按理说这种分散的方式会被按需打包啊。我在网上查了说rollup的树摇操作只能识别esm模块？

浏览量145

疯狂的搬运工

Webpack 中 vendor 跟 DLL 如何取舍？

个人阅读文档返现，Webpack 中 vendor 跟 DLL 都是针对不容易发生变化的单独处理的解决方案，二者该如何对比跟选择呢?

浏览量122

瞳孔放大黑洞

rollup 如何引入 import styles from './styles.css' ？

"index.ts" 代码： import styles from './styles.css' console.log({ styles }) 执行 "rollup -c" 报错： [!] RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript) 如何实现 "styles" 输出为字符串呢？

浏览量22

MastFancy

Rollup打包错误,onMounted中无法import？

RollupError: Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds. 问题起因：vitepress内build的时候报错window is not defined,后查明是icon组件内iconfont.js有使用window。改写为 import { computed, onMounted } from 'vue'; import './index.css'; // import './font/iconfont.js'; onMounted(() => { //@ts-ignore import('./font/iconfont.js').then(() => { }); }) rollup -c 打包会报错！！！ //rollup.config.js配置 module.exports = { input: './packages/index.ts', output: { name: 'XXXXXXX', file: file('umd'), format: 'umd' // 编译模式 }, plugins: [ nodeResolve(), typescript({ tsconfigOverride: overrides }), vuePlugin(), postcss({ plugins: [autoprefixer()], extract: 'style.css' }) ], external: ['vue'] // 依赖模块 }

浏览量23