如何不使用CDN将Ionic打包进基于Rollup的原生Svelte项目中

1. 安装依赖 #

先执行安装命令：

npm install @ionic/core ionicons rollup-plugin-css-only rollup-plugin-copy

2. 修改rollup.config.js配置 #

替换原有配置，新增CSS打包和静态资源拷贝逻辑，完整配置参考：

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
// 新增导入
import css from 'rollup-plugin-css-only';
import copy from 'rollup-plugin-copy';

const production = !process.env.ROLLUP_WATCH;

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// 运行时开启自定义元素支持
				customElement: true,
				dev: !production
			}
		}),
		// 新增：将所有CSS（包括Ionic样式、全局样式）打包到单独文件
		css({ output: 'bundle.css' }),
		// 新增：拷贝Ionic和Ionicons静态资源到打包目录
		copy({
			targets: [
				{ src: 'node_modules/@ionic/core/assets/*', dest: 'public/build/assets' },
				{ src: 'node_modules/ionicons/dist/ionicons/svg/*', dest: 'public/build/svg' }
			],
			hook: 'writeBundle'
		}),
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		!production && serve(),
		!production && livereload('public'),
		production && terser()
	],
	watch: {
		clearScreen: false
	}
};

3. 配置入口文件与全局样式 #

3.1 修改src/main.js #

完成Ionic初始化、资源路径配置、全局样式导入：

// 导入全局样式（含自定义主题变量）
import './global.css';
// 导入Ionic核心样式
import '@ionic/core/css/core.css';
import '@ionic/core/css/normalize.css';
import '@ionic/core/css/structure.css';
import '@ionic/core/css/typography.css';
// 可选：导入工具类样式
import '@ionic/core/css/padding.css';
import '@ionic/core/css/float-elements.css';
import '@ionic/core/css/text-alignment.css';
import '@ionic/core/css/text-transformation.css';
import '@ionic/core/css/flex-utils.css';
import '@ionic/core/css/display.css';

import { initialize, setupIonicConfig } from '@ionic/core/components';
import 'ionicons';

// 配置Ionic全局参数
setupIonicConfig({
  // 统一UI模式，可选'md'（安卓风格）或'ios'（苹果风格）
  mode: 'md',
  // 静态资源路径，后续用Capacitor打包移动端时改为'./build/assets'即可
  assetPath: '/build/assets'
});

// 注册所有Ionic自定义元素
initialize();

// 原有Svelte入口逻辑
import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {}
});

export default app;

3.2 新增src/global.css #

用于存放自定义主题变量，示例：

/* 覆盖Ionic默认主题变量，实现自定义主题 */
:root {
  --ion-color-primary: #2563eb;
  --ion-color-primary-rgb: 37, 99, 235;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #2155cd;
  --ion-color-primary-tint: #3b73ed;

  --ion-border-radius: 8px;
  --ion-font-family: 'Inter', sans-serif;
}

4. 修改index.html引入打包后的CSS #

在public/index.html的head标签中加入打包后的样式引用：

<link rel="stylesheet" href="/build/bundle.css" />

5. Ionic组件使用示例 #

Svelte组件中可以直接使用所有Ionic原生组件，无需单独导入，示例src/App.svelte：

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>测试页面</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-button expand="block" color="primary">
      <ion-icon slot="start" name="home"></ion-icon>
      主按钮
    </ion-button>
    <ion-card>
      <ion-card-header>
        <ion-card-title>卡片标题</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        这是测试卡片内容，所有资源均为本地打包，无需CDN
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-app>

验证 #

执行npm run build后，所有Ionic相关的JS、CSS、图标资源都会打包到public/build目录下，部署或接入Capacitor时直接使用public目录即可，完全不需要外部CDN依赖。

内容的提问来源于stack exchange，提问作者TysonU