现代前端开发

思考

传统网页开发，基本就是 HTML + CSS + JQUERY 的模式。但现在网页越来复杂，很多网页其实就是一个APP，复杂度和以前的网页已经不是一个层级。实际上，现在人们已经在用 HTML + CSS + JS 开发各种APP，网页和APP的开发已经没有了界限。

在进行APP级别的开发时，传统HTML + CSS + JQUERY的模式就力不从心了，所以新的技术就诞生了。

首先，是JavaScript 语言的变化，出现了 ES6 标准，以前的 JavaScript 是 ES5标准，过于简单，比如没有模块的概念。而模块可以说是在进行大型项目开发时，使用的开发语言必不可少的一个特性。

但ES6的出现随之引入了另外一个问题，目前很多浏览器的对ES6的支持并不完善，也就是说如果代码中用了ES6的特性，碰到了不支持的浏览器，就没法运行，所以Babel就出现了，Babel 负责将 ES6 的源码转化成 ES5 源码。

关于 Webpack， 官方说它是一个打包器，但我觉得叫自动化构建工具很合适。比如，Webpack 可以调用 Babel 对 JS 代码进行转化，它自动化了转化这个步骤，不需要你手动去操作 Babel 一个一个对JS源文件进行转化。

然后关于Webpack 打包这个最基础的功能，可以这样理解，就是将一个JS源文件引用的所有模块(这个模块就是上面提到的ES6中的模块的概念)打包到一个JS文件里面，然后HTML页面只需要引用这个打包后的JS文件就可以了，而不是像在传统网页开发里面，用 <-- view 文件对应的Vue组件编译后的 js 文件 -->

// view 对应的入口文件
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
    
Vue.use(Antd);
    
// ExampleComponent 包含原本放到 view 文件里的一切内容
import ExampleComponent from './components/ExampleComponent.vue'
    
// msg 变量对应view文件中的msg变量，这里用它初始化组件。
new Vue({
  render: h => h(ExampleComponent, {props: {msg:msg}}),
}).$mount('#app')

4. 更进一步，前端完全单独架构，后端只负责提供数据接口。暂时就不在继续探索了。