00:00
我们继续的来学习V的高级应用这一章,我们来看一下如何构建生产版本。当需要将我们的应用部署到生产环境的时候,我们只需要运行v build这个命令就可以了。默认情况下呢,它会使用根目录下的index.html作为它的构建入口点,然后会生成能够静态部署的应用程序包,我们来演示一下。回到Vs code,我们按一下CTRL加波浪线,打开我们项目的根目录,在这里边儿呢,我们去创建一个新的项目,我们执行PN PM create。我们来创建一个新项目,名字叫advanced build。我们来去选择view作为我们的模板,然后选择view CD的。Advanced build这个目录下面执行一下PN PM install,安装一下依赖。
01:06
然后呢,我们打开advance build这个文件夹,我们看到呢,这是一个最基本的weight的一个view环境。下面呢,我们来看看如何去将我们个项目进行打包,打包的目的就是为了让我们这个项目在真实的环境里面运行,那我们打开package,点儿Jason,我们看到这里有一个build,一个脚本,它的执行的内容就是V空格build。那我们现在呢,来去运行这个脚本,我们清一下屏,执行一下PN PM run build。上到天以后呢,它会在我们当前的项目根目录下面生成一个Dis目录,在这里边我们能看到有两个文件和一个文件夹,Index HTML是我们打包好的入口文件,这里边有个fair icon表示我们当前这个项目的icon图标,在set里边包含了我们的GSCSS以及图片资源。
02:07
那我们现在打开一下index.js文件,我们折下行在这个文件里边呢,就是已经帮助我们进行代码的压缩了。那接下来呢,我们来运行一下这个项目,注意现在运行呢,不是在我们项目的开发环境下面,而是在生产环境下面。我们需要另外起一个服务来去运行我们下面的这些资源,那如何的去启动呢?我们现在关闭这个文件,再次打开package.jason我们看到script脚本里边还有一个preview preview就是来去预览我们打包好的这个项目的,我们清下屏,执行一下PN PM run preview回车。我们看到我们当前项目启动在了http local host的4173下,我们来打开它一下。回到浏览器,我们看到这个呢,就是我们当前的项目启动的效果,那你可能会问,这个跟我们之前的本地的开发环境的效果不是一样吗?
03:10
我们刚才说过,其实preview启动的是我们D目录下面的资源,我们可以做个实验,打开index.html,我们可以在这个body上面写一个H1标签,上面呢,我们可以写一个叫做build test这样的字符串,保存一下,回到浏览器,我们刷新一下页面,诶,我们发现呢,的确是它打开的是我们D目录下的indextl。接下来我们来看一下构建生产版本的关于浏览器兼容性的问题。用于生产环境的构建,它会假设我们的目标浏览器会支持现代的javascript语法,默认情况下呢,V的目标浏览器需要支持原生的esmscript标签,以及支持原生的ESM动态导入。我们再次回到代码来观察一下,在index atl里面,我们看到这里有一个script typeb的module,如果我们浏览器不支持这个模块化的GS导入的话呢,肯定是有问题的。另外呢,我们再次打开set下面的index.gs我们来看一下这个代码,在这个代码的上面呢,我们看到有个import,然后from,这就说明我们这个代码使用的是我们原生的import导入模块的方法,那如果浏览器不支持这个语法呢,肯定就挂掉了。
04:37
同时呢,我们还可以设置我们当前的这个import语法支持的ES的版本,我们只需要在v.conflict GS里边去做个配置就好了,配置的方法呢,就是在这下面我们加一个build build下面呢,我们定义一个target,它最低支持的是ES2015,也就是ES6,保存一下,然后我们就再次可以去重新的去打包我们的应用了。
05:06
我们执行一下pnpm re的,这样的话呢,我们打包生成以后的JS代码,就是能支持ES6的这个浏览器了。说到这儿,你可能会问,那我们低版本的浏览器该怎么办呢?我们得需要注意了,默认情况下呢,Wait只处理语法转移,它不包含任何的poly file poly file就是垫片,它可以使我们的GS代码降级来支持我们低版本的浏览器。那传统的浏览器我们可以通过一个插件来完成,这个插件呢,就叫v GS plug in legacy,那下面呢,我们给大家演示一下这个插件该如何安装,我们把这些代码呢先关闭掉,然后呢,我们再次打开我们fit conflict.gs我们在命令行里边先把这个插件安装好,我们执行一下PN PM install,后边是at wait GS plug in-legy杠大地回车。
06:15
安装好这个插件以后,我们就可以在这里面去导入了,我们可以import一下这个插件,我们给它起个名字叫legacy,然后from应该是at v GS plug in legacy,我们就可以在这里面去定义它了,我们可以把这个ins做个扩展,在这下面呢,我们来去调用这个leg的方法,在这个里头我们可以去定义一个对象,对象里头呢,我们可以定义一个targets这样的一个属性,后边呢是个数组。我们可以定义一个叫做default这样的一个元素,Default呢,它可以支持0.5%以上的浏览器,并且呢会获取最新的两个版本,那关于这个知识呢,大家可以参阅关于poly fair垫片的相关知识。
07:09
那后面呢,我们还可以继续扩展它,比方说我们这里边写一个note ie11,也就是说不要在IE11的浏览器上运行,好保存一下,那这个配置会给我们带来什么呢?我们可以在这个命令行里边再次执行一下PN PM run build。好,等待片刻以后呢,我们发现现在打包的内容就变多了,我们可以打开目录的as set来看一下,这里边呢,除了我们index.gs以外,还有一个index legy以及poly fair legacy以及vendnder legacy vendnder等等,那我们再次打开index.html,我们发现呢,这些文件就被引进来了啊,这样做的目的呢,就是让我们一些低版本的浏览器可以运行我们V的view的代码。
08:01
接下来呢,我们再来看一下公共基础路径,什么叫公共基础路径呢?就是说我们在部署项目的时候,我们可以不部署在我们的根目上面,我们可以定义我们要部署在哪个目录下,这样的话,在我们服务器端部署多个项目的时候就很有用了。那具体的该怎么实现呢?我们可以通过we build后面加一个刚刚base来去指定我们去引入的那些资源的路径,我们来演示一下。回到代码,我们把这些文件先关闭掉,我们打开package的Jason,这里呢,我们再次复制一个build,在这后边我们写个冒号VIEW3,这只是一个名字而已,在这后边呢,我们加一个杠杠base,等于我们可以定一个路径,比方说project view3好保存一下。然后呢,我们重新的去运行一下mpn PM build。
09:01
但是我们这次build的时候就不是build我们这个原来的build了,我们后面呢,要加一个冒号VIEW3。好,下面我们来看一下发生了什么,我们在Dis目录下面看一眼sets,这个目录下的文件没有发生什么变化,我们再次打开index HTML,我们发现呢,这里的路径都变成了这样的路径。那你可能会问,这个路径变了以后,我们的资源还能访问吗?我们可以试一下清一下屏,执行一下PN PM run preview。然后回到浏览器,我们再次刷新一下,好,我们发现呢,这些资源找不到了,将来呢,我们可以把我们的access这个目录资源传到我们服务器的project view3这个目录下面就可以了。最后,我们再来看一下多页面应用模式。有时候我们再去做我们的项目的时候,可能除了view这个环境以外,我们还希望去搭载一个其他的路径,这样的话呢,我们就可以实现一个大型的多频道的网站了。那比如说我们现在呢,在我们当前的项目game目录下面有一个ne这样的文件夹,这里边呢有一个index.html和ne.js这些资源可以跟我们view本身没有任何关系。另外我们还要在wait.conflict JS里边做一些配置。
10:25
我们要配置build roll up options.input这里你可能会问,为什么还有roll up呢?因为我们知道V在开发环境里边,我们可以使用浏览器自带的模块化的功能,那在生产环境里边呢?我们要借助于roll up。所以呢,我们在配置的时候要配置options这些选项,我们来演示一下。回到我们的代码,首先呢,我们先把这些文件先关闭掉,然后我们在项目的根目录下面创建一个新的文件夹,取名为叫做ne。
11:02
在ne下面我们创建一个新的文件,取名为index.html,再去创建一个ne.gs文件。然后回到index.html,我们通过叹号来生成一个模板,然后通过script标签引入我们当前目录下的neted.gs保存。然后呢,我们在neted.gs里边写一句简单的log,我们来去测试一下need。好,接下来呢,我们就来开始做配置了,我们打开wait.conig.GS。在对的这个地方,我们开始准备去配置我们的robot up,首先呢,我们去写一个roll up options,在这里头我们可以配置一下input,也就是输入的配置,在这里边我们先把我们的view的入口配置给配置好,我们对应一下man。后边呢,我们可以使用resolve来去解析具体的物理路径,那我们得需要去引入我们的resolve,我们可以引入note GS的原生模块path,从PA里边呢,我们去导出resolve这个方法,然后我们去调一下resolve这个方法呢,可以帮助我们解析物理路径。第一个参数我们可以使用下划线,下划线D2NA,这样的话它就指向了我们当前weight conflict GS所在的物理路径,也就是我们项目的根目录。
12:30
那man,也就是我们view的入口应该是跟wait conflict GS同级,因此我们在这个地方呢,直接写一个index.html就好了,接下来我们再配置need,我们再写一个need这样的一个入口的名字,在这后面呢,我们再通过resolve,那第一个参数还是DR name,第二参数的话,那我们要基于当前的这个wait con JS,然后下面的need下的index.html,所以后边呢,我们可以写一个need下的index.html保存一下,这样的话我们的配置就完成了。那接下来我们来看一下打完包以后的效果,我们可以退出这个服务,执行一下PN PM run build。
13:23
好,打完包以后我们来观察一下data目录下的变化,诶,我们发现这里边多出了一个ne目录,那我们去访问一下我们这个打完包以后的应用,我们执行一下PM PM run preview,再次回到我们浏览器刷新一下页面,诶,我们发现MY这个view的这个入口文件已经没有问题了,那接下来呢,我们在后面再输入一个need,好,我们发现呢,现在我们ne的这个JS没有找到,这是为什么呢?我们再次回到编辑器,我们仔细的观察一下我们在当前项目根目录下面定义的这个index.html。
14:05
好,我们再去看,在打包的时候呢,它还给了我们一个提示说呀,你这里的script标签没有去加type,等于module这个属性,那它在位环境下面可能会有问题,那问题出在这儿,那我们就可以直接定义一个type,它的名字叫做module,好保存一下,然后呢,我们再次回到命令行,执行一下PN PM run build,再次打包。打完包以后呢,我们再去执行一下preview,然后回到浏览器,我们再次刷新一下,诶,我们发现need就显示出来了,这样的话我们就实现了可以在胃的环境里面去打包不同的目录这样的目的。好,关于V构建生产版本,我们就讲这三个重点内容,关于构建生产版本的其他的一些知识点,大家可以参照V的官网,大家加油。
我来说两句