Vue分成四个阶段 第三段~
begin enjoy👇

Vue第三段

npmyarn的使用

  • 安装了node后,就可以直接使用npm来管理项目开发时的第三方一些扩展包的安装使用,并且初始化项目包资源结构清单

webpack入门使用

  • 自动化打包构建工具是目前前端开发中使用最火热的一种工具,为什么会有构建工具呢?主要是前端开发碰到的以下几种情况造成的

    • 代码开发过程中大量的注释,回车和换行导致文件不必要的变得过大,而客户端浏览器还是要通过流量来加载源文件及源文件里的各种imagecssjs资源
    • ES6高级语法不断普及的使用。伴随着高级语法的产生,导致前端浏览器兼容解析ES6及再往上的高级语法时,兼容性是个大问题,即便是在移动端设备上,对ES高级语法的解析也是存在不同的兼容性的,如果不了解或者用的不妥当了,会直接因为兼容性问题导致程序bug和崩溃
    • AngularVueReact这种前端MVVM框架越来越火。目前学习到现在,我们会发现使用Vue可以有效将页面分割成不同的模块进行开发,并不太会影响开发效率的同时,对项目后期的扩展维护也更加的方便,可是问题在于,如果分割太多的模块对象,那么最终将资源整合到入口index.html上时会乱七八糟,越往后越不好收拾,并且入口html导入文件过多时也会影响用户的体验
  • 那么看到上边的这些在开发中碰到的实际问题后,所以才产生了前端自动化打包构建工具,可以有效解决前端开发中的各种问题

    • 可以把生产环境(开发环境)和产品环境独立开,意思就是说,该怎么生产就在生产目录里还是怎么生产,最后只需要用构建工具打包下,就可以完美将项目中多余空格,换行,注释,甚至是引号都能干掉了
    • ES6随便用,因为构建工具编译js时,可以通过相应的垫片工具来解析,将高版本的ES语法解析成兼容性更好的ES4ES5的语法,避免了不必要的兼容性bug
    • 对前端MVVM框架做了更好的资源整合,将所有模块整合在一起,最后入口index.html里只需要引入一个整合后的文件即可,不需要在担心各个模块间引入关系是否会弄错的尴尬局面
  • minify: {
    	removeAttributeQuotes: true,
        removeComments: true,
        minifyCSS: true,
        collapseWhitespace: true,
        minifyJS: true,
    },
    

resolve选项里可以配置alias路径名称和extensions默认解析后缀名的配置

webpack解决CommonJS模块化的构建

  • 模块化开发概念:js 编程的封装顶端都是以对象来进行编程封装的,每一个对象在现今的js开发中不再用对象的概念来描述,而是被称为一个模块,那么一个项目在开发到后期时,模块越来越多,模块间的依赖关系越来越复杂后,就需要有模块化规范来连接和解决各个模块之间的关系!
  • webpack只是众多自动化构建工具中的一种,也是目前市场上主流使用的一种,那么对于ES6的高级模块化开发语法,自然也是可以构建并使用的,否则浏览器是无法兼容处理的
  • CommonJS模块化编程主要是对要导出的对象使用exportsmodule.exports来进行操作,前者是对一个空对象里追加要导出的元素,后者则只能导出一个明确的对象来使用
  • 那么最后在其他模块中要使用时,则通过关键词require来实现模块打导入

webpack结局ES6Modules模块化的构建

  • 上边可以看到webpack可以解决CommonJS模块化编程的打包构建工作,CommonJS是什么模块化编程规范?那么可是NodeJS后端的模块化编程规范,也就是说要在Node虚拟机里的V8来解析的,所以说webpack的强大之处一目了然。
  • (超重点)那么前端现在的模块化编程规范有四种。一种是基于require.jsAMD模块化编程规范,一种是基于sea.jsCMD模块化编程规范,这两种都是解决以前面向对象编程时整合对象模块间关系的模块化插件框架。但是随着ES6高级语法的流行,又产生了以NodeJS为主的CommonJS模块化开发规范和以ES6高级语法的Modules模块化编程规范。
  • ES6Modules模块化编程里主要是使用exportimport来对模块对象进行导入导出操作的

posted @ Zycin (非转载 来自个人学习资料整理)