思考

传统网页开发，根本就是 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文件就能够了，而不是像在传统网页开发外面，用<script>、<style>标签一一援用用到的JS、CSS文件。这个过程有点像C++程序的编译，源代码有好多文件，但编译后的后果只有一个 .exe文件。

更进一步，正是因为 Webpack 能让咱们自动化对JS文件进行一些解决，才有了 VUE的单文件组件开发模式、TypeScript这些货色。总而言之，甭管你源码用咋写，写啥，只有在用Webpack 自动化解决之后的JS代码能在浏览器运行，那就没问题。

下面ES6、Webpack 一个是从语言角度，一个是从构建角度呈现的新技术。Vue、React之类则是从网页开发角度呈现的新技术，相比于 JQUERY 指间接操作 DOM，它们提供了一种更不便、更弱小操作DOM的形式，也让应用HTML开发APP真正成为事实。

在传统我的项目中引入古代Web开发技术

以一个基于的Laravel的传统我的项目为例，能够分为三种档次。

  1. 间接引入Vue等新的开发框架。原生Vue等只是提供了一种新的操作DOM的形式，并没有应用ES6之类的新的语言规范（即便应用了，自身也会提供转换过后的版本），所以间接应用就好，并不需要用Webpack做什么预处理
  1. 应用基于Vue等开发的UI框架，如Ant Design of Vue。这类框架尽管在开发时都采纳了ES6或者其余的一些新的技术（如Ant Design of Vue应用的Vue的单文件组件），但也能够间接应用，但要抉择它们提供的通过转化之后的版本，或者本人用Webpack进行转换。
  1. 全面引入新技术。以在一个基于的Laravel的传统我的项目中应用 ES6 + Ant Design of Vue + Vue 的单文件组件为例，基本思路，每一个View 对应一个 Vue单文件组件，本来放到View文件中的内容都放到Vue单文件组件中，而后在View对应的blade文件中，只须要引入这个组件就能够了，至于Laravel 与blade 文件的交互（指Laravel通过传变量给blade文件管制blade文件的显示），能够通过将这些变量转成JS变量，而后传给这个View对应的Vue单文件组件。示例如下：
// view 文件<!doctype html><html lang="{{ app()->getLocale() }}">    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Laravel</title>        <-- view 文件对应的Vue组件编译后的 css 文件 -->        <link href="/css/app.css" rel="stylesheet" type="text/css">    </head>    <body>        <div id="app">                </div>        <script type="text/javascript">            // 将Laravel传给view的变量都转成JS变量，从而传给VUE组件，            // 用于管制页面显示            var msg = "{{ isset($msg) ? $msg : 'welcome'  }}";        </script>        <-- view 文件对应的Vue组件编译后的 js 文件 -->        <script type="text/javascript" src="/js/manifest.js"></script>         <script type="text/javascript" src="/js/vendor.js"></script>         <script type="text/javascript" src="/js/app.js"></script>     </body></html>
// 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')
  1. 更进一步，前端齐全独自架构，后端只负责提供数据接口。临时就不在持续摸索了。