Svelte Range Slider Pips 项目教程
svelte-range-slider-pipsMulti-Thumb, Accessible, Beautiful Range Slider with Pips项目地址:https://gitcode.com/gh_mirrors/sv/svelte-range-slider-pips
1. 项目的目录结构及介绍
svelte-range-slider-pips/
├── src/
│ ├── components/
│ │ ├── RangeSlider.svelte
│ │ └── RangeSliderPips.svelte
│ ├── main.js
│ └── App.svelte
├── public/
│ ├── index.html
│ └── global.css
├── package.json
├── README.md
└── rollup.config.js
src/
:包含项目的源代码。
components/
:包含主要的组件文件,如 RangeSlider.svelte
和 RangeSliderPips.svelte
。main.js
:项目的入口文件。App.svelte
:主应用组件。
public/
:包含静态文件,如 index.html
和全局样式文件 global.css
。package.json
:项目的依赖和脚本配置文件。README.md
:项目的说明文档。rollup.config.js
:Rollup 的配置文件,用于打包项目。
2. 项目的启动文件介绍
main.js
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
- 该文件是项目的入口文件,负责初始化
App.svelte
组件并将其挂载到 document.body
上。 props
对象用于传递初始属性给 App.svelte
组件。
3. 项目的配置文件介绍
package.json
{
"name": "svelte-range-slider-pips",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public"
},
"dependencies": {
"svelte": "^3.0.0"
},
"devDependencies": {
"rollup": "^2.0.0",
"rollup-plugin-svelte": "^6.0.0",
"sirv-cli": "^1.0.0"
}
}
name
和 version
:项目的名称和版本。scripts
:定义了项目的构建、开发和启动命令。
build
:使用 Rollup 进行打包。dev
:使用 Rollup 进行开发模式打包,并监听文件变化。start
:启动开发服务器。
dependencies
和 devDependencies
:项目的依赖包。
rollup.config.js
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';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
dev: !production,
css: css => {
css.write('public/build/bundle.css');
}
}),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
};
input
:指定入口文件为 src/main.js
。output
:定义输出文件的格式和路径。plugins
:配置 Rollup 插件,包括 Svelte 插件、CommonJS 插件
svelte-range-slider-pipsMulti-Thumb, Accessible, Beautiful Range Slider with Pips项目地址:https://gitcode.com/gh_mirrors/sv/svelte-range-slider-pips