1. 项目概述为什么选择这个技术栈如果你是一个想用 TypeScript 写 HTML5 游戏但又对着一堆配置文件和版本兼容性头疼的开发者那么今天聊的这个“Phaser-CE NPM Webpack TypeScript”入门项目模板可能就是你的“开箱即用”救星。我最初接触 Phaser 时官方例子大多是 ES5 的 JavaScript直接扔几个script标签在 HTML 里虽然简单但项目稍微一大模块管理、代码提示、类型检查就成了噩梦。后来 Phaser 3 成了主流生态更现代但 Phaser-CECommunity Edition作为 2.x 版本的一个维护分支依然有大量的存量项目和教程对于想学习经典游戏开发模式、或者维护老项目的开发者来说它仍然是一个重要的选择。这个入门项目的核心价值就是它帮你把几个“麻烦事”一次性打包解决了用 NPM 管理依赖告别手动下载库文件用 Webpack 打包和构建支持模块化开发用 TypeScript 编写代码获得强大的类型安全和编辑器智能提示。它不是一个复杂的游戏而是一个经过验证的、可运行的基础开发环境。你拿到手npm install一下npm start就能看到一个浏览器窗口跑起来一个最简单的 Phaser 游戏场景然后你就可以在这个坚实的基础上去专心实现你的游戏逻辑而不是在配置 Webpack 的ts-loader和file-loader时踩坑。简单说它适合两类人一是刚接触 Phaser 或前端游戏开发不想在环境搭建上浪费时间的初学者二是需要快速启动一个 TypeScript 版 Phaser-CE 项目原型的老手。接下来我会把这个项目里里外外拆解一遍告诉你每个部分是怎么工作的以及如何基于它进行扩展。2. 技术栈深度解析每一环为何不可或缺2.1 Phaser-CE经典框架的现代延续Phaser-CE 是 Phaser 2.x 的一个社区维护分支。为什么不用最新的 Phaser 3这取决于你的目标。Phaser 3 的 API 设计更现代、性能更好但学习曲线相对陡峭且与 Phaser 2 的代码不兼容。Phaser-CE 则保留了 Phaser 2 广为人知的 API 风格网上有海量的教程、示例和插件很多经典插件可能只支持到 2.x 版本。对于入门学习尤其是通过大量现有 Phaser 2 资源学习的人来说Phaser-CE 是一个更平滑的起点。在这个项目模板中Phaser-CE 是作为核心游戏引擎被引入的。它通过 NPM 安装这意味着你可以精确控制版本比如在package.json中指定phaser-ce: ^2.16.0避免了手动管理phaser.min.js文件可能带来的版本混乱问题。TypeScript 的使用则需要对应的类型定义文件types/phaser这能让你在写this.game.add.sprite()时编辑器能自动提示出add下面的所有方法如sprite,group,text等极大提升开发效率。2.2 TypeScript从“写起来爽”到“维护起来更爽”对于游戏开发这种逻辑复杂的场景TypeScript 的优势是决定性的。首先是类型安全当你定义一个精灵Sprite时你可以明确它的类型是Phaser.Sprite。如果你不小心调了一个只有Phaser.Image才有的方法编译器会在你写代码的时候就报错而不是等到游戏运行时才在浏览器控制台看到一个模糊的undefined is not a function。这能提前避免大量低级错误。其次是智能提示IntelliSense。Phaser 的 API 非常庞大有几百个类和方法。有了 TypeScript 和类型定义VS Code 或 WebStorm 等编辑器能给你精确的自动完成。比如你输入this.physics.arcade.编辑器会立刻列出enable,velocityFromAngle,collide等一系列方法你不需要死记硬背或频繁查阅文档。在这个项目模板里TypeScript 的配置核心在于tsconfig.json文件。一个关键的设置是module: commonjs这告诉 TypeScript 编译器按照 CommonJS 模块规范输出代码这是 Node.js 和 Webpack 早期广泛使用的规范以便 Webpack 能够正确处理。另一个重要设置是allowJs: true这允许项目里混合使用.ts和.js文件提供了灵活性。2.3 Webpack模块打包的“中枢神经”Webpack 在这里扮演了构建管道的角色。它的工作流程可以这么理解入口Entry从src/index.ts这个主文件开始。加载Loaders遇到.ts文件用ts-loader调用 TypeScript 编译器tsc转成 JavaScript遇到.png、.jpg等图片或.wav、.mp3等音频文件用file-loader将它们复制到输出目录并返回最终在浏览器中可访问的 URL 路径。插件PluginsHtmlWebpackPlugin会自动根据模板生成index.html并自动将打包好的 JavaScript 文件比如bundle.js用script标签注入进去。CleanWebpackPlugin则在每次构建前清理旧的输出目录保持干净。输出Output将所有处理好的模块打包成一个或多个bundle.js文件输出到dist目录。为什么不用更快的 ViteVite 确实在开发体验上优势明显尤其是热更新速度。但这个模板选择 Webpack更多是出于生态稳定性和教学目的的考虑。Webpack 的配置虽然复杂但资料极其丰富任何构建问题几乎都能找到解决方案。对于初学者理解 Webpack 的基本工作流程loader, plugin, bundle是一次宝贵的学习经历。而且这个模板的 Webpack 配置已经调优好了你无需从零开始。2.4 NPM依赖管理的基石NPM 的作用不仅仅是npm install。项目根目录的package.json文件是这个项目的“身份证”和“清单”。dependencies里列出了项目运行必需的库phaser-ce游戏引擎。devDependencies里列出了开发工具typescript语言编译器、ts-loaderWebpack 加载器、webpack构建工具、webpack-cli命令行工具、webpack-dev-server开发服务器、html-webpack-plugin等。scripts里定义了快捷命令start: webpack-dev-server --open启动开发服务器并自动打开浏览器build: webpack进行生产环境构建。通过 NPM Scripts团队任何成员都能用完全一致的命令进行开发、构建保证了环境的一致性。这也是现代前端项目的标准实践。3. 项目结构与核心文件详解一个典型的项目结构如下我们逐一拆解每个文件的作用phaser-ce-typescript-starter/ ├── dist/ # 构建输出目录由Webpack自动生成 ├── node_modules/ # 依赖库目录由npm install生成 ├── src/ # 源代码目录 │ ├── assets/ # 静态资源图片、音频等 │ │ └── logo.png │ ├── states/ # 游戏状态场景推荐按功能模块组织 │ │ └── Boot.ts │ │ └── Preloader.ts │ │ └── MainMenu.ts │ │ └── Game.ts │ ├── index.html # HTML模板 │ ├── index.ts # TypeScript入口文件 │ └── game.ts # 游戏主配置与初始化文件 ├── .gitignore # Git忽略文件配置 ├── package.json # NPM项目配置和依赖声明 ├── tsconfig.json # TypeScript编译器配置 ├── webpack.config.js # Webpack构建配置 └── README.md # 项目说明文档3.1 入口点src/index.ts与src/game.tssrc/index.ts通常是整个应用的起点但它在这里可能非常简短主要作用是导入主游戏文件并启动它。// src/index.ts import { Game } from ./game; // 当DOM内容加载完毕后初始化游戏 window.onload () { new Game(); };真正的核心在src/game.ts。这里创建了 Phaser 游戏实例并注册了游戏的各种状态场景。// src/game.ts import * as Phaser from phaser-ce; import { BootState } from ./states/Boot; import { PreloaderState } from ./states/Preloader; import { MainMenuState } from ./states/MainMenu; import { GameState } from ./states/Game; export class Game extends Phaser.Game { constructor() { // 游戏配置宽度、高度、渲染器、父容器等 const config: Phaser.IGameConfig { width: 800, height: 600, renderer: Phaser.AUTO, // 自动选择Canvas或WebGL parent: game-container, // HTML中承载游戏的div的id state: null, // 不使用Phaser的默认状态管理我们自己管理 transparent: false, antialias: true, physicsConfig: null // 物理系统配置如果需要可在此添加 }; super(config); // 注册游戏状态场景 this.state.add(Boot, BootState, false); this.state.add(Preloader, PreloaderState, false); this.state.add(MainMenu, MainMenuState, false); this.state.add(Game, GameState, false); // 启动Boot状态 this.state.start(Boot); } }关键点解析Phaser.AUTO让 Phaser 自动选择渲染后端优先尝试 WebGL失败则回退到 Canvas。这是最兼容的方式。parent: game-container游戏画布将被插入到 HTML 中idgame-container的 DOM 元素内。这比让 Phaser 自动生成并附加到body更可控方便你围绕游戏画布布局其他 UI 元素。状态管理我们使用了 Phaser 的 State Manager。每个状态如BootState,PreloaderState都是一个独立的类包含preload(),create(),update()等生命周期方法。通过this.state.add()注册再用this.state.start()启动实现了场景的分离和切换代码结构更清晰。3.2 游戏状态场景设计这是 Phaser 游戏组织的核心模式。我们以BootState和PreloaderState为例。// src/states/Boot.ts export class BootState extends Phaser.State { preload() { // 这里可以加载一些必须在游戏最开始就加载的极少量资源 // 例如加载一个用于预加载界面本身的进度条图片 this.load.image(preload-bar, assets/images/preload-bar.png); } create() { // 设置游戏缩放模式适配不同屏幕 this.scale.scaleMode Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally true; this.scale.pageAlignVertically true; // 初始化物理系统如果需要 // this.game.physics.startSystem(Phaser.Physics.ARCADE); // 完成后跳转到预加载状态 this.game.state.start(Preloader); } }// src/states/Preloader.ts export class PreloaderState extends Phaser.State { private preloadBar: Phaser.Sprite; preload() { // 创建并显示一个进度条使用在Boot状态加载的图片 this.preloadBar this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, preload-bar); this.preloadBar.anchor.set(0.5); this.load.setPreloadSprite(this.preloadBar); // 将精灵设置为预加载进度条 // 正式加载游戏所需的所有资源 this.load.image(player, assets/images/player.png); this.load.image(platform, assets/images/platform.png); this.load.audio(jumpSound, [assets/audio/jump.wav, assets/audio/jump.mp3]); // 提供多个格式以兼容浏览器 this.load.spritesheet(enemy, assets/images/enemy.png, 32, 32); // 加载精灵图 // ... 加载更多资源 } create() { // 资源加载完毕销毁进度条进入主菜单或游戏状态 this.preloadBar.destroy(); this.game.state.start(MainMenu); } }设计要点职责分离Boot负责最基础的初始化缩放、物理系统Preloader负责加载大量资源MainMenu负责主菜单逻辑Game负责核心玩法。每个状态只关心自己该做的事。资源加载Phaser.Loader提供了丰富的加载方法image,audio,spritesheet,atlasJSONHash等。使用setPreloadSprite可以轻松实现图形化进度条。状态切换通过this.game.state.start(NextState)进行切换。状态机会自动调用新状态的preload如果需要、create、update等方法。3.3 核心配置文件tsconfig.json与webpack.config.jstsconfig.json是 TypeScript 编译器的指挥棒。{ compilerOptions: { target: es5, // 编译成ES5语法确保浏览器兼容性 module: commonjs, // 模块系统Webpack能处理 lib: [dom, es2015], // 包含的库定义dom用于浏览器APIes2015用于新语法 sourceMap: true, // 生成source map方便调试 outDir: ./dist/, // 输出目录但Webpack通常不直接使用这个输出 strict: true, // 启用所有严格类型检查选项 moduleResolution: node, // 使用Node.js的模块解析策略 esModuleInterop: true, // 改善CommonJS和ES模块的互操作性 skipLibCheck: true, // 跳过库文件的类型检查加快编译速度 forceConsistentCasingInFileNames: true // 强制文件名大小写一致 }, include: [ src/**/* // 编译src目录下的所有.ts文件 ], exclude: [ node_modules // 排除node_modules ] }webpack.config.js是构建流程的蓝图。这里提供一个简化但功能完整的开发环境配置// webpack.config.js const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); const { CleanWebpackPlugin } require(clean-webpack-plugin); module.exports { mode: development, // 开发模式不会压缩代码包含source map entry: ./src/index.ts, // 入口文件 devtool: inline-source-map, // 生成内联source map调试时能映射到原始TypeScript代码 devServer: { static: ./dist, // 开发服务器服务的目录 hot: false, // 对于Phaser游戏完全的热替换可能有问题通常关闭或谨慎使用 open: true // 自动打开浏览器 }, module: { rules: [ { test: /\.ts$/, // 匹配所有.ts文件 use: ts-loader, // 使用ts-loader处理 exclude: /node_modules/ }, { test: /\.(png|svg|jpg|jpeg|gif|wav|mp3|ogg)$/i, // 匹配资源文件 type: asset/resource, // Webpack 5 的资源模块替代 file-loader generator: { filename: assets/[name][hash][ext] // 输出到dist/assets/目录下并带哈希值 } } ] }, resolve: { extensions: [.ts, .js] // 引入模块时可以省略这些后缀名 }, output: { filename: bundle.js, // 输出文件名 path: path.resolve(__dirname, dist), assetModuleFilename: assets/[hash][ext][query] // 资源文件的输出规则 }, plugins: [ new CleanWebpackPlugin(), // 每次构建前清理dist文件夹 new HtmlWebpackPlugin({ template: ./src/index.html, // 以src/index.html为模板 title: Phaser CE TypeScript Game // 可以注入到模板的变量 }) ] };配置要点ts-loader它内部会调用tsc但将编译过程集成到 Webpack 流水线中并处理依赖图。asset/resource这是 Webpack 5 的新特性内置了资源处理能力无需再单独安装file-loader。它会将匹配到的文件复制到输出目录并返回最终 URL。HtmlWebpackPlugin它会自动将打包生成的bundle.js插入到模板 HTML 中。你的src/index.html可能很简单只需要一个div idgame-container/div即可。webpack-dev-server提供了一个本地开发服务器支持实时重载Live Reload。当你修改代码并保存时浏览器会自动刷新。4. 从零开始搭建与运行完整实操指南假设你的开发环境已经安装了 Node.js建议 LTS 版本和一个代码编辑器如 VS Code。我们一步步来。4.1 初始化项目与安装依赖创建项目文件夹并初始化 NPMmkdir my-phaser-game cd my-phaser-game npm init -y这会生成一个默认的package.json文件。安装项目依赖生产依赖npm install phaser-ce安装开发依赖npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin types/phaser这里我们一次性安装了所有需要的工具。types/phaser是 Phaser-CE 的 TypeScript 类型定义文件至关重要。创建配置文件 在项目根目录创建tsconfig.json和webpack.config.js内容可以参考上一节的示例。创建源代码目录和文件 创建src目录以及index.html,index.ts,game.ts,states/Boot.ts等文件内容参考上一节。在src/assets/下放一些测试用的图片如logo.png。4.2 编写一个最简单的可运行示例为了让项目立刻跑起来我们可以先简化。在src/states/下创建一个Game.ts作为第一个也是唯一的状态。// src/states/Game.ts export class GameState extends Phaser.State { private logo: Phaser.Sprite; private cursors: Phaser.CursorKeys; preload() { // 加载一个logo图片 this.load.image(logo, assets/logo.png); } create() { // 添加一个logo精灵到屏幕中央 this.logo this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, logo); this.logo.anchor.setTo(0.5, 0.5); // 启用物理系统Arcade物理 this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.enable(this.logo); // 给logo一个随机速度 (this.logo.body as Phaser.Physics.Arcade.Body).velocity.setTo(200, 200); // 设置碰撞世界边界反弹 (this.logo.body as Phaser.Physics.Arcade.Body).collideWorldBounds true; (this.logo.body as Phaser.Physics.Arcade.Body).bounce.set(1); // 获取键盘光标键控制 this.cursors this.game.input.keyboard.createCursorKeys(); } update() { // 每帧更新这里可以用键盘控制logo覆盖物理速度 if (this.cursors.left.isDown) { (this.logo.body as Phaser.Physics.Arcade.Body).velocity.x -150; } else if (this.cursors.right.isDown) { (this.logo.body as Phaser.Physics.Arcade.Body).velocity.x 150; } else { (this.logo.body as Phaser.Physics.Arcade.Body).velocity.x 0; } if (this.cursors.up.isDown) { (this.logo.body as Phaser.Physics.Arcade.Body).velocity.y -150; } else if (this.cursors.down.isDown) { (this.logo.body as Phaser.Physics.Arcade.Body).velocity.y 150; } else { (this.logo.body as Phaser.Physics.Arcade.Body).velocity.y 0; } } }然后修改src/game.ts直接启动GameState。// src/game.ts import * as Phaser from phaser-ce; import { GameState } from ./states/Game; export class Game extends Phaser.Game { constructor() { const config: Phaser.IGameConfig { width: 800, height: 600, renderer: Phaser.AUTO, parent: game-container }; super(config); this.state.add(Game, GameState, false); this.state.start(Game); } }4.3 运行与构建修改package.json的 scriptsscripts: { start: webpack-dev-server --open, build: webpack --mode production }启动开发服务器npm start如果一切配置正确你的默认浏览器会自动打开http://localhost:8080你应该能看到一个可以键盘控制的 Logo 在屏幕内反弹。进行生产构建npm run buildWebpack 会以生产模式压缩代码、优化进行打包所有最终文件bundle.js,index.html, 资源文件都会在dist目录下。你可以将这个dist文件夹部署到任何静态网站托管服务上。5. 进阶配置与优化技巧5.1 处理资源加载与路径问题在 Webpack 中处理资源路径需要特别注意。在 TypeScript 代码中我们使用相对路径如assets/logo.png来引用资源。Webpack 的asset/resource规则会处理这些导入但前提是这些资源路径能被 Webpack 的模块解析系统“看到”。最佳实践是使用 ES Module 的import语法来引入资源这样 Webpack 能明确知道这是一个依赖。但 Phaser 的load.image()方法接收的是字符串路径。一个常见的技巧是将资源文件放在src目录下如src/assets/然后利用 Webpack 的require或import来获取最终被处理后的 URL。实际上更简单直接的方式是确保资源文件位于src目录下或子目录并且你在preload中使用的相对路径是相对于当前执行上下文的。由于 Webpack Dev Server 默认将项目根目录作为 Web 服务器的根目录而src目录下的文件会被打包并复制到dist因此assets/logo.png这样的路径在开发服务器和生产构建后都能正确指向dist/assets/logo.png。如果你遇到 404 错误检查资源文件是否真的在src/assets/目录下。Webpack 配置中asset/resource的generator.filename规则确保输出路径和你在代码中引用的路径能对应上。浏览器的开发者工具Network 标签页查看资源请求的具体 URL 是什么是否匹配。5.2 配置多环境与代码分割对于更复杂的项目你可能需要区分开发和生产环境的不同配置。创建多个 Webpack 配置可以创建webpack.dev.js和webpack.prod.js分别导出开发和生产配置。然后修改package.json的 scriptsscripts: { start: webpack serve --config webpack.dev.js --open, build: webpack --config webpack.prod.js }在webpack.prod.js中你可以设置mode: production并添加更多优化插件如TerserPlugin用于压缩 JavaScript。代码分割如果你的游戏很大可以考虑将一些不常用的代码如某个特定的游戏关卡状态单独打包按需加载。Webpack 支持通过import()动态导入语法实现代码分割。但在 Phaser 中状态切换通常是同步的需要谨慎设计异步加载逻辑。5.3 集成现代前端工具ESLint Prettier为了保证代码风格一致和避免错误可以集成 ESLint代码检查和 Prettier代码格式化。安装对应的依赖和配置并在 VS Code 中安装插件即可实现保存时自动格式化。Git Hooks使用husky和lint-staged可以在提交代码前自动运行 ESLint 检查和 Prettier 格式化确保提交到仓库的代码是规范的。6. 常见问题排查与实战心得6.1 典型错误与解决方案npm install失败或警告allow-scripts问题安装某些包含原生扩展如node-sass虽然本项目没有的包时可能会因为安全策略或网络问题失败。或者出现类似npm warn allow-scripts 1 package has install scripts not yet covered by allow-list的警告。解决网络问题尝试使用国内镜像源。可以临时设置npm install --registryhttps://registry.npmmirror.com。或使用nrm工具管理镜像源。脚本执行策略这个警告通常可以忽略它只是提示有安装脚本。如果确实需要运行脚本可以配置 npm 的allow-scripts。对于本项目Phaser-CE 和 TypeScript 相关包一般没有需要特殊权限的安装脚本可以安全继续。权限问题在 macOS/Linux 上有时需要sudo。在 Windows 上尝试用管理员权限打开命令行。更好的做法是使用 Node 版本管理工具如nvm或nvm-windows将 Node 安装到用户目录避免权限问题。npm start后浏览器白屏控制台报错Phaser is not defined或Cannot read property Game of undefined问题这通常是因为 Phaser 库没有正确引入。在 TypeScript 中我们使用import * as Phaser from phaser-ce;。确保phaser-ce和types/phaser已正确安装在node_modules中。tsconfig.json中的moduleResolution: node已设置这样 TypeScript 才能找到node_modules里的类型定义。Webpack 能正确解析phaser-ce这个包。检查webpack.config.js中的resolve.extensions是否包含.js。图片或音频资源加载 404问题在代码中写的路径如assets/logo.png在浏览器中请求时找不到。解决确认文件确实存在于src/assets/目录下。确认 Webpack 配置中asset/resource规则正确匹配了文件类型并且generator.filename的输出路径如assets/[name][hash][ext]与你代码中引用的基础路径assets/能对应。有时需要设置output.publicPath来修正基础路径。在浏览器开发者工具的 Network 面板查看请求的完整 URL与dist目录下的实际文件路径对比。TypeScript 编译错误Cannot find module phaser-ce或类型错误问题TypeScript 编译器找不到模块声明或类型定义。解决运行npm install types/phaser。如果还不行尝试在tsconfig.json的compilerOptions中添加typeRoots: [./node_modules/types]明确指定类型定义的查找位置。确保你的import语句正确。对于 Phaser-CE使用import * as Phaser from phaser-ce;是标准做法。6.2 性能优化与调试技巧使用 WebGL 渲染器在游戏配置中renderer: Phaser.AUTO会优先尝试 WebGL。WebGL 在渲染大量精灵、粒子效果时性能远优于 Canvas。确保你的图形驱动正常。纹理图集Texture Atlas不要加载几十上百张单独的小图片。使用工具如 TexturePacker将多个小图打包成一张大图图集和一个对应的 JSON 数据文件。然后用load.atlasJSONHash加载。这能显著减少 HTTP 请求次数并提升渲染性能因为 GPU 只需要绑定一个纹理。对象池Object Pooling对于频繁创建和销毁的对象如子弹、敌人使用对象池复用对象避免垃圾回收带来的卡顿。Phaser 提供了Phaser.Group并可以启用Group.enableBody true来方便地管理一组具有物理属性的对象Group.createMultiple可以预创建对象池。调试工具浏览器开发者工具Sources 面板可以调试 TypeScript 源码需要 source map。Console 面板可以查看 Phaser 的日志和错误。Performance 面板可以分析运行时性能。Phaser 调试插件社区有一些调试插件可以显示物理边界、帧率、内存使用情况等。console.log与 Debug 版本在开发时可以使用console.log输出变量。也可以考虑在 Webpack 配置中定义全局变量如__DEBUG__来控制调试代码是否包含在构建中。6.3 项目组织与扩展建议状态管理坚持使用 Phaser 的状态State来划分游戏的不同部分启动、加载、菜单、关卡1、关卡2、游戏结束等。每个状态文件保持专注。实体组件系统ECS考虑对于非常复杂的游戏纯面向对象的继承层次可能会变得难以维护。可以研究一下 ECS 架构但 Phaser 2.x/CE 本身不是 ECS 设计需要引入额外的库或自己实现一套轻量级的管理方式。配置外部化将游戏常量如玩家速度、重力、关卡数据提取到单独的 JSON 或 TypeScript 配置文件中方便调整和平衡。声音管理创建统一的声音管理器类处理音效的播放、暂停、音量控制避免声音代码散落在各处。输入管理除了键盘可以考虑统一处理触摸、鼠标、游戏手柄的输入抽象出一套控制指令。这个“Phaser-CE NPM Webpack TypeScript 入门项目”模板的价值在于它提供了一个正确、可运行、可扩展的起点。它帮你屏蔽了底层工具链的复杂性让你能快速进入游戏逻辑创作。当你熟悉了这个流程后完全可以基于此模板根据自己项目的需求定制 Webpack 配置、调整项目结构、集成更多工具打造属于你自己的高效游戏开发工作流。记住工具是为你服务的理解其原理后就可以灵活运用和改造。