babel

babel 是一个编译器.作用将高版本js便以为低版本js

怎么学习工具

解决什么问题呢?(为什么学)

浏览器不识别高版本js 问题

误区

• 看到 npm init 别慌

npm init 知识创建package.json文件 作用:只有安装内容方便.

• es6为了开发者提供方便的,写法好看,可读性,易于维护

但是:你编写的代码,浏览器不认识

babel

• 1: 你:开发者 用es6 编写的代码
• 2: 用babel 将你写的代码,重新编译,并生成编译后的文件
• 3: html中script中导入的是 编译后的代码.

你学习的

• 1:babel 怎么使用
• 2:里面有哪些细节内容

安装

npm i @babel @babel/core @babel/cli @babel/preset-env @babel/polyfill -D

使用

• 新建一个babel工具的配置文件 babel.json,.babelsr,package.json中添加babel

作用: 告诉babel工具,我让你你干啥

通过下载插件,并使用插件方式;告诉 bable ,你干什么

      // npm：node 包管理工具
​
      // npm install
​
      // 2.安装 Node.js
      // node -v
      // npm -v
​
      // 3.初始化项目
      // npm init -> package.json
​
      // 4.安装 Babel 需要的包
​
      // npm install --save-dev @babel/core @babel/cli
      // npm install --save-dev @babel/core@7.11.0 @babel/cli@7.10.5

babel编译es6代码

 // https://babeljs.io/setup
​
​
   // 1.执行编译的命令
​
   // 在 package.json 文件中添加执行 babel 的命令
​
   // babel src -d dist
​
   // babel src --out-dir dist
​
   // 语法: babel 被编译的文件名  --out-dir 编译后的文件名
​
​
​
   // npm run build
​
​
​
   // 2.Babel 的配置文件
​
   // .babelrc
​
​
​
   // npm install @babel/preset-env@7.11.0 --save-dev
​
​
​
   // 创建配置文件 .babelrc，并配置
​
   // {
​
   //  "presets": ["@babel/preset-env"]
​
   // }

• 接下来用几张图让你快速了解 环境构建和文件转化