【vue】babel的介绍以及编写vue文件

一、Babel

是一个单独的工具，与webpack独立，但是可以和webpack一起使用
作用：es6或者 typescript 转化为普通的js代码
场景：比如一个旧浏览器不认识demo.js中的es6的箭头函数

单独使用（不和webpack一起使用时）：

npm install @babel/core  @babel/cli@babel/core  @babel/cli -D
//这样node_modules就有babel相关代码了

npx babel demo.js  --out-dir dist//不改变文件名字时
这样会在项目生成dist/demo.js,并且还是ES6代码
npx babel demo.js --out-file test.js
这样会在项目生成 test.js 还是es6代码

//因为没有使用箭头函数转换相关的插件
npm install @babel/plugin-transform-arrow-functions -D

然后
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions

这样就会看到test.js没有了箭头函数，变成了es5的内容,成功！

可以加多个函数转换相关的插件比如
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
这样就会看到test.js没有箭头函数，也没有了块级作用域(const,let变成了var)

这样每个语法转换都需要插件的话，那也太麻烦了，于是出现了
babel的预设preset
使用方法:
npm install @babel/preset -env -D
npx babel demo.js --out-file test.js --presets=@babel/preset-env
综上可见，babel是一个编译工具，从一个源代码编译成另外一个源代码。

二、webpack与babel结合

webpack打包main.js时不会转es6为es5,
因为这不是他的工作，这是就需要用到集成到webpack的babel工具:babel-loader

第一步：npm install babel-loader @babel/core  @babel/cli -D因为之前安装过，所以不用安装了
第二步：在webpack.config.js中，写上
const path=require('path')
module.exports={
entry:'./src/main.js',
output:{
  path:path.resolve(__dirname,'./build')
  filename:'bundle.js'
  },
 module:{
  rules:[
  {
    test:/\.css$/ 正则表达式
    loader:"css-loader"   下边use的语法糖
   use:[
   {loader:"css-loader",options:{}}
   {loader:"file-loader",options:{
      outputpath:"img",
      name:"[name]_[hash:6].[ext]"
    }}
   ]
 } 
{
    test:/\.js$/ 正则表达式
    use:{
      loader:"babel-loader",
      options:{
        plugins:[       
  "@babel/plugin-transform-arrow-functions",
  "@babel/plugin-transform-block-scoping"
            ]
        preset:[//不写plugin也可以这么写
         "@babel/preset-env"
        }
     }
   
 }
}

这样很臃肿，因为options可能会很大，于是可以抽取出来，两种命名方式
babel.config.js/json/cjs/mjs（推荐）
babelrc.json/js/babeljs/cjs/mjs

babel.config.js中写上

module.exports ={
  presets:[
  "@babel/preset-env"
  ]
}

在webpack.config.js中

{
test:/\.js$/
loader:"babel-loader"
}

这样配置后，dist中的代码也是es5的代码了

三、webpack打包vue文件

webpack与vue
vue本身也是js代码，

在main.js中引入vue模块:
npm install vue@next;

import {createApp} from 'vue'
在后边就可以
const app = createApp({
  template:'<h2>我是vue2解析出来的<h2>'
  data(){
    return{
     title:"hello world"
    }
  }
});
app.mount("#app");

这样还是不能解析出来，
因为template的内容需要vue源码对其进行解析，但是vue源代码给我们提供了很多版本，但是所有版本分为两类，一种是runtime+compliler（暂时定义为版本一）,
，一种是runtime-only（暂时定义为版本二）
如果写了template：·xxxx·内容的话，需要compliler解析那么必须用版本一，但是默认用的是版本二
(如果template不这么写的话就没事儿，比如.vue文件）
vue开发过程中有三种方式编写DOM元素
方式一：template模板的方式，需要vue源码中的代码
方式二：render函数的方式，使用h函数来编写渲染的内容，直接返回vnode，不用我们处理
方式三：通过.vue中的template来编写模板，需要vue-loader

打包后不同vue版本解析
打开node_module后，找到vue包

3.1、vue(.runtime).global(.prod).js

首先说vue.global.js,如果通过浏览器

3.2、vue(.runtime).esm-browser(.prod).js

esmodule专用vue版本，这个js打开是esmodule形式的

3.3、vue(.runtime).esm-bundler.js

用于webpack,eollup,parcel等构建工具
默认是带runtime的，这就是上边main.js没有加载出template的原因，解决办法
import {createApp} from ‘vue/dist/vue.esm-bunder.js’

3.4、vue.cjs(.prod).js

服务器端渲染使用，
通过require()在node.js中使用

四、vscode对sfc文件的支持

如果不安装这两个插件，那么vscode根本不认识.vue文件是啥
vetur插件
volar插件

五、编写vue文件

新建一个vue文件夹
新建App.vue

<template></template>
<script>
export default {
xxx
data/method..
没有template,因为loader会对其解析
解析后就会把template加入到里边并导出去
}
</script>
<style>
</style>

main.js中最上边
import App from './vue/App.vue'

const app = createApp(App);

编译失败，因为webpack不认识.vue,所以需要一个loader，(和css一样),

npm install vue-loader@next -D
npm install @vue/compiler-sfc
webpack.config.js中写上
{
  test:/\.vue$/,
  loader:"vue-loader"
}

此外还需要一个插件才能不报错
const { VueLoaderPlugin } = require('vue-loader/dist/index');
在插件里
new VueLoaderPlugin()