webpack 热重载的3种方式

开发阶段，如果每次文件变更后，都要手动去打包build是很不方便的，通常在开发阶段采用以下三种方式进行热重载（自动编译）

配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。packagejson文件增加watch脚本 --watch 动态监听文件的改变并实时打包，输出新的文件，这样文件多了之后速度会很慢，而且此打包方式不会热更新，即每次webpack编译之后，你还需要手动刷新浏览器。
缺点： 需手动刷新浏览器
优点： 自动编译

webpack-dev-server实际上相当于启用了一个express的>

step1: 创建一个项目录
注意：项目名一般 不要带中文
step2: 创建 packagejson

或者：

step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jqueryjs)，只引入项目js入口文件( mainjs ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件
每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和出口文件，麻烦。可以在项目目录下建立配置文件 webpackconfigjs ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 packagejson 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：
执行上述命令后终端会有类似信息输出：
Project is running at >1 为什么用 webpack
他像 Browserify, 但是将你的应用打包为多个文件 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码 当他么访问到另一个页面, 他们不需要重新下载通用的代码
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包, 还有其他一些
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6) 如果你不知道用什么, 就用 CommonJS
2 Webpack 给 Browserify 的同学用
对应地:
browserify mainjs > bundlejs
webpack mainjs bundlejs
Webpack 比 Browserify 更强大, 你一般会用 webpackconfigjs 来组织各个过程:
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码
3 怎样启动 webpack
切换到有 webpackconfigjs 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for production (minification)
webpack -p 来针对发布环境编译(压缩代码)
webpack --watch 来进行开发过程持续的增量编译(飞快地!)
webpack -d 来生成 SourceMaps
4 JavaScript 方言
Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\coffee$/, loader: 'coffee-loader' },
{ test: /\js$/, loader: 'jsx-loaderharmony' } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolveextensions 参数指明那些文件 Webpack 是要搜索的:
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
filename: 'bundlejs'
},
module: {
loaders: [
{ test: /\coffee$/, loader: 'coffee-loader' },
{ test: /\js$/, loader: 'jsx-loaderharmony' }
]
},
resolve: {
// 现在可以写 require('file') 代替 require('filecoffee')
extensions: ['', 'js', 'json', 'coffee']
}
};
5 样式表和
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require('/bootstrapcss');
require('/myappless');
var img = documentcreateElement('img');
imgsrc = require('/glyphpng');
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀<style>标签 当你引入, Webpack 在包当中插入对应的 URL, 这个 URL 是由require()` 返回的
你需要配置 Webpack(添加 loader):
// webpackconfigjs
moduleexports = {
entry: '/mainjs',
output: {
path: '/build', // 和 JS 会到这里来
publicPath: '>今天小编要跟大家分享的文章是关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师。经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何当成功处理了数千个用户的 *** 作时，你感觉如何？





大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员(前端，后端和全栈)的实用指南。


1、首先确定你的目标或道路


我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：


·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。


·你想以自由开发人员的身份来开始自己的业务或代理。


·你可以成为其他公司的顾问。


·你可以创建自己的应用来赚钱。


·编码是你的业余爱好。


从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。


2、Web开发的基本工具和软件


·
计算机和 *** 作系统：如果没有计算机和 *** 作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。你可以使用任何类型的中型笔记本电脑或台式机。对于 *** 作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。


·文本编辑器/
IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime
Text或Atom。如果我们谈论IDE，那么是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。


·
Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。


·终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper这些都是可以使用的选项。


·设计(可选)：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe
XD，Photoshop，Sketch或Figma。


3、从HTML和CSS开始


HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。


·HTML5(语义元素，属性，文档类型等)


·CSS基础知识颜色，字体，位置，盒子模型等。


·CSSGrid和Flexbox对齐内容或创建列。


·CSS自定义属性


4、响应式布局


您的应用程序应该在所有类型的设备(例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。


·了解如何设置视口


·媒体查询不同的屏幕尺寸。


·流体宽度


·雷姆单位


·移动优先


5、自定义可重用CSS组件


与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。


6、CSS框架


学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。


·Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。


·Tailwind
CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。


·物化


·布尔玛


7、前端必须语言：JavaScript


学习HTML和CSS之后，接下来需要学习的是Vanilla
Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP，Python或#)中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题


·JavaScript基础知识(变量，数据类型，函数，条件等)


·DOM(文档对象模型)


·JSON(JavaScript对象表示法)


·提取API(请求/响应/Ajax)


·如果您想转向React，Vue，Angular或其他框架，现代JS(ES6)概念对于学习非常重要。


8、一些重要工具


Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。


·
Git(版本控制)和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。


·
了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。


·大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual
Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。


·Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。


·
学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库(例如React)，那么这些软件包管理器将使用很多，但是对于其他语言(例如Python或Php)，您将使用不同的软件包管理器。


·
如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此 *** 作，因此需要Webpack或Parcel对其进行捆绑。


9、基本部署


此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。


·域注册(Namecheap，Google等)


·托管托管(InMotion，Hostgator，Bluehost等)


·静态主机(Netlify，Github页面)


·SSL证书。


·FTP，SFTP(文件传输协议)非常适合小型应用程序。


·SSH(安全外壳)，用于高级应用程序。


·CLI和Git。


到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架(如React，Vue或Angular)将是很棒的。


10、前端框架和状态管理


框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。


·React：React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Redux和
ContextAPI与Hooks一起使用以进行状态管理。


·Vue：
Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。


·Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习
TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和Services是可以学习此框架的良好状态管理器。


可选学习：


·
如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。


·
了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。


·静态网站生成器：Gatsby(反应式)和Gridsome(Vue)


我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。


11、服务器端语言(选择一种)


您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项


·NodeJS(不是语言，而是运行时环境)


·Python(非常适合初学者)


·Java(适合大型组织)


·Php(适合自由职业)


·Ruby(2020年少两极)


·C#


·Go


注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串(最重要)。你将同时使用这两种方法。


12、服务器端框架(选择一项)


一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一


·Nodejs_Express，Koa，Adonis，Featherjs，Nestjs


·Python：Django，Flask，


·Java：SpringMVC，Grails


·PHP：Laravel，Symfony，Codeignitor，Slim


·Ruby：Sinatra上的RubyonRails


·C#：ASPNETMVC


·Go：Revel


13、数据库(选择一项)


大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。


·关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MSSQL。


·NoSQL：MongoDB，RethinkDB，CouchDB


·云数据库：Firebase，AzureCouldDB，AWS


·轻量级和缓存：Redis，SQLlite，NeDB


在学习数据库时，您还将学习RDBMS，ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL
：(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。


14、CMS：内容管理


您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。


·
传统CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enduro(Javascript)


·其他CMS：DEDECMS，帝国CMS，PHPcms，Prismicio，Strati。


15、部署和DevOps


托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。


在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。


·SSH(安全外壳)


·Web服务器环境：NGINX，Apache


·应用程序托管：Linode，Heroku，AWS，Azure，Now。


·虚拟化：Docker，Vagrant


·测试：单元，功能，集成等


·负载平衡，监视，安全性。


以上所有技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。


以上就是小编今天为大家分享的关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师的文章，希望本篇文章能够对正在从事web前端工作的小伙伴和正在学习web前端知识的伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的web前端开发工程师！


英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻译|web前端开发(ID：web_qdkf)

就在不久前，创建和部署 游戏 的唯一方法是选择像 Unity 或 Unreal 这样的 游戏 引擎，学习语言，然后打包 游戏 并将其部署到你选择的平台上。

试图通过浏览器向用户提供 游戏 的想法似乎是一项不可能完成的任务。

幸运的是，由于浏览器技术的进步和硬件加速在所有流行的浏览器中都可用，JavaScript 性能的改进以及可用处理能力的稳步提高，为浏览器创建交互式 游戏 体验变得越来越普遍。

在本文中，我们将了解如何使用 Threejs 创建 游戏 。但首先，让我们回顾一下 Threejs 是什么以及为什么它是 游戏 开发的好选择。

Threejs 在 GitHub 上的项目描述恰当地将 Threejs 描述为“一个易于使用、轻量级、跨浏览器的通用 3D 库”。

Threejs 让我们作为开发人员可以相对简单地在屏幕上绘制 3D 对象和模型。如果没有它，我们将需要直接与 WebGL 交互，虽然这并非不可能，但即使是最小的 游戏 开发项目也会花费大量时间。

传统上，“ 游戏 引擎”由多个部分组成。例如，Unity 和 Unreal 提供了一种将对象渲染到屏幕上的方法，但也提供了大量其他功能，如网络、物理等等。

然而，Threejs 的方法更受限制，不包括物理或网络之类的东西。但是，这种更简单的方法意味着它更容易学习和更优化以做它最擅长的事情：将对象绘制到屏幕上。

它还有一组很棒的示例，我们可以使用它们来了解如何在屏幕上绘制各种对象。最后，它提供了一种简单且原生的方式将我们的模型加载到我们的场景中。

如果不希望用户需要通过应用商店下载应用或进行任何设置来玩你的 游戏 ，那么Threejs 作为 游戏 开发引擎可能是一个有吸引力的选择。如果你的 游戏 在浏览器中运行，那么进入门槛最低，这只能是一件好事。

今天，我们将通过制作一个使用着色器、模型、动画和 游戏 逻辑的 游戏 来浏览 Threejs。我们将创建的内容如下所示：

这个概念很简单。我们控制着一艘火箭飞船，穿越一个星球，我们的目标是拾取能量晶体。我们还需要通过增加护盾来管理飞船的 健康 状况，并尽量不要因为撞击场景中的岩石而严重损坏我们的船。

在我们的运行结束时，火箭飞船返回天空中的母舰，如果用户点击 NEXT LEVEL ，他们会再次尝试，这一次火箭要经过更长的路径。

随着用户玩 游戏 ，火箭飞船的速度会增加，因此他们必须更快地躲避岩石并收集能量晶体。

要创建这样的 游戏 ，我们必须回答以下问题：

到我们制作这款 游戏 时，我们将克服这些挑战。

不过，在我们开始编码之前，我们必须回顾一些简短的理论，特别是与我们将如何在 游戏 中创造运动感有关。

想象一下，你在现实生活中控制着一架直升机，并且正在跟踪地面上的一个物体。物体以逐渐增加的速度继续前进。为了跟上，你必须逐渐提高你所在直升机的速度。

如果对直升机或地面上的物体的速度没有限制，只要你想跟上地面上的物体，这种情况就会持续下去。

当创建一个跟随对象的 游戏 时，正如我们在本例中所做的那样，应用相同的逻辑可能很诱人。也就是说，在世界空间中随着物体的加速移动物体，并更新后面跟随的相机的速度。然而，这提出了一个直接的问题。

基本上，每个玩这个 游戏 的人都会在他们的手机或台式电脑上玩它。这些设备资源有限。如果我们尝试在相机移动时生成可能无限数量的对象，然后移动该相机，最终我们将耗尽所有可用资源，并且浏览器选项卡将变得无响应或崩溃。

我们还需要创建一个代表海洋的平面（一个平面 2D 对象）。当我们这样做时，我们必须给出海洋的尺寸。

然而，我们不能创建一个无限大的平面，我们也不能创建一个巨大的平面，只是希望用户永远不会在我们的关卡中前进到足以让他们离开平面的程度。

那是糟糕的设计，并且希望人们玩我们的 游戏 不足以体验错误似乎违反直觉。

我们不是在一个方向上无限期地移动我们的相机，而是让相机保持静止并移动它周围的环境。这有几个好处。

一是我们总是知道火箭飞船在哪里，因为火箭的位置不会移到远处；它只会左右移动。这让我们很容易判断物体是否在相机后面，并且可以从场景中移除以释放资源。

另一个好处是我们可以选择远处的一个点来创建对象。这意味着当物体接近玩家时，新的物品或物体将不断地在玩家视野之外的距离创建。

当它们从视野中消失时，无论是玩家与它们发生碰撞还是从玩家身后消失，这些物品都会从场景中移除，以降低内存使用量。

要创建这种效果，我们需要做两件事：首先，我们需要在程序上沿深度轴移动每个项目，以将对象移向相机。其次，我们必须为我们的水面提供一个可以抵消的值，并随着时间的推移增加这个偏移量。

这将产生水面移动越来越快的效果。

现在我们已经解决了如何在场景中向前移动火箭，让我们继续设置我们的项目。

让我们开始制作 游戏 吧！我们需要做的第一件事是设置构建环境。对于这个例子，我选择使用 Typescript 和 Webpack。这篇文章不是要讨论这些技术的有点，所以除了快速总结之外，我不会在这里详细介绍它们。

使用 Webpack 意味着当我们开发项目并保存文件时，Webpack 将看到我们的文件已更改，并使用保存的更改自动重新加载浏览器。

这意味着我们无需在每次进行更改时手动刷新浏览器，从而节省大量时间。这也意味着我们可以使用像three-minifier这样的插件，它可以在我们部署它时减小我们的包的大小。

在我们的示例中使用 TypeScript 意味着我们的项目将具有类型安全性。我发现这在使用 Threejs 的一些内部类型时特别有用，比如Vector3s 和Quaternions 知道我将正确类型的值分配给变量是非常有价值的。

我们还将在 UI 中使用Materialize CSS。对于我们将用作 UI 的几个按钮和卡片，这个 CSS 框架将有很大帮助。

要开始我们的项目，请创建一个新文件夹。在文件夹中，创建一个packagejson并粘贴以下内容：

然后，在命令窗口中，键入npm i以将包安装到新项目中。

我们现在需要创建三个文件，一个基本的 Webpack 配置文件，然后是我们项目的开发和生产配置文件。

在项目文件夹中创建一个webpackcommonjs文件并粘贴以下配置：

然后，创建一个webpackdevjs文件并粘贴这些详细信息。这配置了 Webpack 开发服务器的热重载功能：

最后，创建一个webpackproductionjs文件并粘贴这些详细信息：

我们需要做的下一件事是配置 TypeScript 环境以允许我们使用来自 JavaScript 文件的导入。为此，请创建一个tsconfigjson文件并粘贴以下详细信息：

我们的构建环境现在已经配置好了。现在是时候开始为我们的玩家创造一个美丽而可信的场景了。

我们的场景包含以下元素：

我们将在一个名为 gamets的文件中完成大部分工作，但我们也会将部分 游戏 拆分为单独的文件，这样我们就不会得到一个非常长的文件。我们现在可以继续创建文件gamets。

因为我们正在处理一个非常复杂的主题，所以我还将包含指向此代码在 GitHub 上的项目中的位置的链接。这应该有望帮助你保持自己的方向，而不是在更大的项目中迷失方向。

我们需要做的第一件事是创建一个Scene，以便 Threejs 有一些东西可以渲染。在我们的gamets中，我们将添加以下行来构建我们的并将 一个ScenePerspectiveCamera放置在场景中，这样我们就可以看到发生了什么。

最后，我们将为稍后分配的渲染器创建一个引用：

为了设置我们的场景，我们需要执行一些任务，比如创建一个新的WebGLRenderer和设置我们想要绘制的画布的大小。

为此，让我们创建一个init函数并将其也放入我们的gamets中。此init函数将为我们的场景执行初始设置，并且只运行一次（当 游戏 首次加载时）：

我们还需要为场景利用渲染和动画循环。我们需要动画循环来根据需要在屏幕上移动对象，并且我们需要渲染循环来将新帧绘制到屏幕上。

让我们继续在gamets中创建render函数。 一开始，这个函数看起来很简单，因为它只是请求一个动画帧然后渲染场景。

我们请求动画帧的原因有很多，但其中一个主要原因是如果用户更改选项卡，我们的 游戏 将暂停，这将提高性能并减少设备上可能浪费的资源：

好了，现在我们有了一个空的场景，里面有一个相机，但没有别的了。让我们在场景中添加一些水。

幸运的是，Threejs 包含一个我们可以在场景中使用的水对象示例。它包括实时反射，看起来相当不错；你可以在这里查看。

对我们来说幸运的是，这种水将完成我们在场景中想要做的大部分事情。我们唯一需要做的就是稍微改变水的着色器，这样我们就可以在渲染循环中更新它。

我们这样做是因为如果随着时间的推移，我们越来越多地抵消我们的水纹理，那么它会给我们带来速度的感觉。

作为演示，下面就是我们 游戏 的开场场景，但我每帧都增加了偏移量。随着偏移量的增加，感觉就像我们下方海洋的速度正在增加（即使火箭实际上是静止的）。

水对象可以在 Threejs GitHub 上找到。我们唯一需要做的就是做一个小的改变，使这个偏移量可以从我们的渲染循环中控制（所以我们可以随着时间的推移更新它）。

我们要做的第一件事是在 Threejs 存储库中获取 Waterjs 示例的副本。我们将把这个文件objects/waterjs放在我们的项目中。如果我们打开waterjs文件，大约一半，我们将开始看到如下所示的内容：

这是海洋材质的着色器。着色器本身的介绍超出了本文的范围，但基本上，它们是我们的 游戏 将向用户的计算机提供的关于如何绘制此特定对象的说明。

这里还有我们的着色器代码，它是用 OpenGraph 着色器语言 (GLSL) 编写的，并合并到一个原本是 JavaScript 的文件中。

这没有什么问题，但是如果我们将这个着色器代码单独移动到一个文件中，那么我们可以将 GLSL 支持安装到我们选择的 IDE 中，我们将获得语法着色和验证之类的东西，这有助于我们自定义 GLSL

要将 GLSL 分解为单独的文件，让我们在当前objects目录中创建一个shader目录，选择 我们的vertexShader和 fragmentShader 的内容， 并将它们分别移动到waterFragmentShaderglsl和waterVertexShaderglsl文件中。

在我们waterFragmentShaderglsl文件的顶部，我们有一个getNoise函数。默认情况下，它看起来像这样：

为了使这个偏移量可以从我们的 游戏 代码中调整，我们想在我们的 GLSL 文件中添加一个参数，允许我们在执行期间对其进行修改。为此，我们必须将此函数替换为以下函数：

你会注意到我们在这个 GLSL 文件中包含了一个新变量：speed变量。这是我们将更新以提供速度感的变量。

在我们的gamets中，现在需要配置水的设置。在我们文件的顶部，添加以下变量：

然后，在我们的init函数中，必须配置水平面的旋转和位置，如下所示：

这将为海洋提供正确的旋转。

Threejs 带有一个相当令人信服的天空，我们可以在项目中免费使用它。你可以在此处的 Threejs 示例页面中查看此示例。

在我们的项目中添加天空非常容易；只需要将天空添加到场景中，设置天空盒的大小，然后设置一些参数来控制天空的外观。

我们需要对初始场景初始化做的最后一件事是添加一些光照并添加我们的火箭模型和母舰模型：

现在我们有了一些漂亮的水和火箭的场景。但是，我们缺乏任何可以真正使它成为 游戏 的东西。为了解决这个问题，我们需要构建一些基本参数来控制 游戏 并允许玩家朝着某些目标前进。

在我们gamets文件的顶部，我们将添加以下sceneConfiguration变量，这有助于我们跟踪场景中的对象：

现在，我们必须为玩家所在的当前关卡执行初始化。这个场景设置函数很重要，因为每次用户开始一个新的关卡时都会调用它。

因此，我们需要将火箭的位置设置回起点并清理所有正在使用的旧资产。我在代码行内添加了一些注释，以便你可以看到每一行在做什么：

我们预计有两种类型的设备可以玩我们的 游戏 ：台式电脑和手机。为此，我们需要适应两种类型的输入选项：

现在让我们配置这些。

在我们gamets的开始，我们将添加以下变量来跟踪键盘上是否按下了左键或右键：

然后，在我们的init函数中，我们将注册keydownandkeyup事件来分别调用onKeyDownandonKeyUp函数：

最后，对于键盘输入，我们将记录按下这些键时要执行的 *** 作：

我们的移动用户没有键盘可以输入，因此，我们将使用nippleJS在屏幕上创建一个 *** 纵杆，并使用 *** 纵杆的输出来影响火箭在屏幕上的位置。

在我们的init函数中，我们将通过检查它在屏幕上是否有非零数量的触摸点来检查设备是否是触摸设备。如果是，我们将创建 *** 纵杆，但一旦玩家释放 *** 纵杆的控制，我们还将将火箭的运动设置回零：

在我们的animate函数中，我们会跟踪此时按下左键或右键或 *** 纵杆是否正在使用中的 *** 作。我们还将火箭的位置夹在可接受的左右位置，这样火箭就不能完全移出屏幕：

正如我们已经讨论过的，火箭飞船在我们的场景中保持静止，并且物体朝它移动。这些物体移动的速度随着用户继续玩而逐渐增加，随着时间的推移增加了关卡的难度。

仍然在我们的动画循环中，我们希望逐步将这些对象移向玩家。当对象离开玩家的视野时，我们希望将它们从场景中移除，这样我们就不会占用玩家计算机上不必要的资源。

在我们的渲染循环中，我们可以像这样设置这个功能：

我们可以看到有几个函数是这个调用的一部分：

让我们 探索 一下这些函数在我们的 游戏 中完成了什么。

碰撞检测是我们 游戏 的重要途径。没有它，我们将不知道我们的火箭飞船是否达到了任何目标，或者它是否撞到了岩石并应该减速。这就是我们想要在 游戏 中使用碰撞检测的原因。

通常，我们可以使用物理引擎来检测场景中对象之间的碰撞，但是 Threejs 没有包含物理引擎。

不过，这并不是说 Threejs 不存在物理引擎。他们当然可以，但是为了我们的需要，我们不需要添加物理引擎来检查我们的火箭是否击中了另一个物体。

本质上，我们想回答这个问题，“我的火箭模型目前是否与屏幕上的任何其他模型相交？” 我们还需要根据受到的打击以某些方式做出反应。

例如，如果我们的玩家不断将火箭撞到岩石上，我们需要在受到一定程度的伤害后结束关卡。

为了实现这一点，让我们创建一个函数来检查我们的火箭和场景中的对象的交集。根据玩家击中的内容，我们会做出相应的反应。

我们将把这段代码放在我们的game目录中的一个collisionDetectionts文件中：

对于碰撞检测，我们唯一需要做的另一件事是添加一个短动画，当用户与对象碰撞时播放该动画。此函数将获取发生碰撞的位置并从该原点生成一些框。

完成的结果将如下所示。

为了实现这一点，我们必须在碰撞发生的地方创建一个圆圈中的盒子，并将它们向外设置动画，这样看起来它们就像从碰撞中爆炸一样。为此，让我们在collisionDetectionts文件中添加此功能：

这就是我们整理出来的碰撞检测，当物体被破坏时会有一个漂亮的动画。

随着场景的进行，我们希望在玩家的两侧添加一些悬崖，这样感觉就像他们的运动在某个空间内得到了适当的限制。我们使用模运算符在程序上将岩石添加到用户的右侧或左侧：

随着场景的进行，我们还希望将“挑战行”添加到场景中。这些是包含岩石、水晶或盾牌物品的物体。每次创建这些新行中的一个时，我们都会为每一行随机分配岩石、水晶和盾牌。

因此，在上面的示例中，单元格 1、2 和 4 没有添加任何内容，而单元格 3 和 5 分别添加了水晶和盾牌项目。

为了实现这一点，我们将这些挑战行分为五个不同的单元格。我们根据随机函数的输出在每个单元格中生成某个项目，如下所示：

可以在这些链接中的任何一个查看岩石、水晶和盾牌创建功能。

我们需要在渲染循环中完成的最后一件事是：

在我们的渲染函数结束时，我们可以添加以下代码来适应这个功能：

这就是我们的渲染循环完成了。

当人们加载我们的 游戏 时，他们会看到一些让他们能够开始玩的按钮。

这些只是简单的 HTML 元素，我们根据 游戏 中发生的情况以编程方式显示或隐藏它们。问题图标让玩家对 游戏 的内容有所了解，并包含有关如何玩 游戏 的说明。它还包括我们模型的（非常重要的！）许可证。

并且，按下红色按钮开始 游戏 。请注意，当我们点击红色的“播放”按钮时，摄像机会移动并旋转到火箭后面，让玩家准备好开始场景。

在我们的场景init函数中，我们将要执行此 *** 作的事件注册到此按钮的onClick处理程序。要创建旋转和移动功能，我们需要执行以下 *** 作：

为此，我们将在init函数中添加以下代码，如下所示：

当我们的关卡结束时，我们还必须连接我们的逻辑，并且可以在此处查看执行此 *** 作的代码。

在 Threejs 中创建 游戏 可以让你接触到数量惊人的潜在客户。由于人们可以在浏览器中玩 游戏 而无需下载或安装到他们的设备上，因此它成为开发和分发 游戏 的一种非常有吸引力的方式。

正如我们所见，为广泛的用户创造一种引人入胜且有趣的体验是非常有可能的。所以，唯一需要解决的是，你将在 Threejs 中创建什么？

原文链接：>在我第一次接触React来练习在页面上创建并渲染组件。虽然我非常喜欢react动态的页面和Redux的单状态项目，可我使用了太多的时间来配置配置文件以及安装开发依赖，浪费了大量的编码时间
React项目初始化搭建非常痛苦是因为React不是一个面向一整个项目的库。根据Facebook的文档，`it’s a view library for building user interfaces`这是一个用于建设用户界面的库，可随着React环境的慢慢成熟，当使用React开发的时候大量的开发者会普遍使用一些类似于Webpack或者Babel的工具来处理这个问题，可是这些工具经常变更，所以，每当你第一次初始化React开发环境的时候，会令人非常烦恼
为了帮你解决这个困扰，我已经把把自己的项目初始化放到了这个gist上，其中包含了，我的webpack在开发环境和生产环境的配置和express服务器的代码。我会向你演示如何热更新模块，这个功能可以在你的浏览器在你修改代码后自动更新界面，不需要自己手动刷新这个界面，这一整个项目也在Github上面可以找到
你可以直接使用我的配置然后开始使用React，可是我还是想唠叨一遍这些文件都在做一些什么事情，这样的话当出现了一些bug后，你不会在要解决一些问题的时候手足无措。当我刚开始搭建一个React项目的时候，有大量的关于使用es5语法和一些废弃的模块搭建的Webpack/React项目的教程。如果你是一个非常酷的选手，正在使用ES6编写React的话，我希望这篇文章能够帮到你

---