shader-doodle 项目使用教程
目录结构及介绍
shader-doodle 项目的目录结构如下:
shader-doodle/
├── examples/
├── src/
├── test/
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
├── rollup.config.js
└── tsconfig.json
主要目录和文件介绍:
- examples/: 包含一些示例代码,展示如何使用 shader-doodle 组件。
- src/: 项目的源代码,包括主要的 JavaScript 和 GLSL 代码。
- test/: 包含项目的测试文件。
- .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
- .npmignore: 指定 npm 发布时忽略的文件和目录。
- .prettierrc: 配置代码格式化工具 Prettier 的规则。
- .travis.yml: 配置 Travis CI 持续集成服务。
- LICENSE: 项目的开源许可证,这里是 MIT 许可证。
- package.json: 项目的 npm 配置文件,包含依赖、脚本等信息。
- README.md: 项目的说明文档。
- rollup.config.js: 配置 Rollup 打包工具。
- tsconfig.json: 配置 TypeScript 编译选项。
项目的启动文件介绍
项目的启动文件主要是 src/index.js
,这是项目的入口文件。它导入了主要的组件和功能,并提供了对外的接口。
// src/index.js
import ShaderDoodle from './ShaderDoodle.js';
export default ShaderDoodle;
项目的配置文件介绍
package.json
package.json
是 npm 项目的配置文件,包含项目的基本信息、依赖、脚本等。
{
"name": "shader-doodle",
"version": "0.1.0",
"description": "A friendly web-component for writing and rendering shaders.",
"main": "dist/shader-doodle.js",
"module": "dist/shader-doodle.mjs",
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w",
"test": "jest",
"lint": "eslint src"
},
"dependencies": {
"lit-element": "^2.3.1"
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"eslint": "^7.9.0",
"jest": "^26.4.2",
"rollup": "^2.28.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-terser": "^7.0.2"
},
"keywords": [
"shaders",
"webgl",
"glsl",
"web-component"
],
"author": "halvves",
"license": "MIT"
}
rollup.config.js
rollup.config.js
是 Rollup 打包工具的配置文件,用于配置项目的打包选项。
// rollup.config.js
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/index.js',
output: [
{
file: 'dist/shader-doodle.js',
format: 'umd',
name: 'ShaderDoodle',
sourcemap: true
},
{
file: 'dist/shader-doodle.mjs',
format: 'es',
sourcemap: true
}
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
terser()
]
};
tsconfig.json
tsconfig.json
是 TypeScript 编译器的配置文件,用于配置 TypeScript 项目的编译选项。