做网站备案完成之后需要干什么,西安建设工程信息网 人员信息,招聘网站内容建设,网站开发语言字典了解构建工具之前#xff0c;我们首先要知道的是浏览器只认识html、css、js#xff0c;而我们开发时用的vue#xff0c;react框架都只是为了方便我们开发而使用的工具
使用构建工具的原因
vue或react的企业级项目里都会具备这些功能#xff1a; 1.使用typescript语言我们首先要知道的是浏览器只认识html、css、js而我们开发时用的vuereact框架都只是为了方便我们开发而使用的工具
使用构建工具的原因
vue或react的企业级项目里都会具备这些功能 1.使用typescript语言如果我们遇到ts文件我们需要使用tsc命令将typescript代码转换为js代码 2.使用react/vue:安装react-complier/vue-complier,将我们写的jsx文件或者.vue文件转换为render函数将他们转换为html、js、css 3.使用less/sass/postcss/component-style:我们又需要安装less-loader,sass-loader等一系列编译工具将他们转换为css 4.语法降级babel--将es5以上的新语法转换为低版本浏览器可以接受的js语法。 5.体积优化uglifyjs --- 将我们的代码进行压缩变成体积更小性能更高的文件 6.······ 这些所有的功能在每次修改项目时都必须全部执行一遍
例如在React项目修改了App.tsx文件的内容在编译运行到浏览器上之前我们需要将该文件做如下的处理
App.tsx使用了TypeScript语言-- 使用tsc处理TypeScript -- App.jsx先转变为JavaScript语言) App.jsxReact文件-- React-complier处理.jsx文件) --js文件直到拿到js文件如果没有一款帮助我们自动处理这些重复性工作的工具是不是我们开发起来也非常麻烦呢于是这些工具就诞生了
这个工具能够帮你把tsc,vue-complier,react-complier,less-loader,babel,uglifyjs等全部集成在一起。这样我们只需要关心我们写的代码就好了一旦我们修改了某文件代码---工具就会帮自动去调用tsc, react-compiler, less, babel, uglifyjs等其他工具并执行 ---最终直接生成浏览器能够渲染执行的html、css、 js文件。
而这个工具就叫做构建工具。
生成浏览器能够渲染执行的html、css、 js文件的过程就叫做打包.
构建工具主要干了些什么
1.模块化开发支持支持直接从node_modules里引入代码多种模块化支持
import vue from vue; //浏览器并不认识这样的文件引入方式它只认识绝对路径和相对路径的引入方式。所以这里构建工具就需要对他进行处理。将vue转变为./vue等等。2.处理代码兼容性比如babel语法降级less、ts语法转换不是构建工具做的构建工具将这些语法对应的处理工具集成进来自动化处理
3.提高代码性能压缩文件代码分割
4.优化开发体验
构建工具会帮你自动监听文件的变化当文件变化以后会自动帮你调用对应的集成工具进行重新打包然后再浏览器重新运行整个过程叫做热更新hot replacement
开发服务器跨域的问题用react-cli,create-react-element,vue-cli解决跨域的问题
每次改一点 --- 这个顺序还不能错 构建工具它让我们可以不用每次都关心我们的代码再浏览器如何运行我们只需要首次给构建工具提供一个配置文件这个配置文件也不是必须的如果你不给他他会有默认的帮你去处理有了这个集成的配置文件以后我们就可以在下次需要更新的时候调用一次对应的命令就好了如果我们再结合热更新, 我们就更加不需要管任何东西, 这就是构建工具去做的东西, 他让我们不用关心生产的代码也不用关心代码如何在浏览器运行, 只需要关心我们的开发怎么写的爽怎么写就好了
