babel

can i use 兼容性

一 复习ES6

js:

ECMA(babel---ES6转ES5)
DOM:（JQ VUE react)
BOM:(window.loaction.href)

ES6:

1 新增语法
let const    async await    拓展运算符    for of    ()=>
解构赋值    import export
2 新增API
Object.assgin()
Promise
通病：兼容性不高

二 Babel

解决ES6的兼容性问题 chrom可以独立更新，考虑最高版本即可。

安装 npm i @babel/core   @babel/cli -D

npm info :查看包的信息

如何正确使用前端工具：

（前端工具一定要本地安装，是为了统一项目中工具的版本）

① Babel下执行命令，在node_modules中的bin中，这样比较麻烦

② 本地安装：npx -v 会在当前目录下的node_modules中的bin去寻找

③ 本地安装：npm脚本，配置:“babel”:“babel -v” 执行命令：npm run babel

④ 全局安装：npm i @babel/core @babel/cli -g可以用babel命令（环境变量中寻找npm）

去掉全局安装 npm uninstall @babel/core @babel/cli -g

特殊脚本 start ：npm run babel 可以直接运行npm start

三 解决语法的兼容性问题

Babel命令行工具的使用 找到入口

安装插件，让插件帮助解析代码 在script后面添加plugind -o打包到另外一个文件

npm i @babel/core @babel/cli -D
 "scripts": {
        "babel": "babel ./src/js/index.js -o ./dist/js/index.js",
        }

优化插件新建文件.babelrc

创建babel的配置文件: .babelrc
    {
        "presets": ["@babel/preset-env"]
    }

Babel套餐 下载套餐 配置presets

安装套餐: npm i @babel/preset -D

四 解决API的兼容性问题

mdn https://developer.mozilla.org/zh-CN/

衬垫代码polyfill 安装 -S（默认可不加）：生产环境

安装衬垫: npm i @babel/polyfill

区别：生产环境上线能带着 开发环境不用带

引入import 浏览器不认识require

**注意：**Babel只能将es6的模块化语法编译成commonJS语法

安装commonjs的打包工具,browserify : npm i browserify -D
查看使用方式：npx  browserify   -h  

配置

"scripts": {
        "babel": "babel ./src/js/index.js -o ./dist/js/index.js",
        "brow" :" browserify ./dist/js/index.js -o ./dist/js/index.min.js",
        "start": "npm run babel && npm run brow"
      }

运行：npm run brow (7000多行)

可以同时在start里同时运行两个脚本

 "start": "npm run babel && npm run brow"

官网查看https://www.babeljs.cn/

按需引入：useBuiltIns

使用profill会污染全局环境 改造浏览器

runtime 直接生成方法

解决生成很多次方法

两者有什么区别？

babel只负责进行语法转换，将es6语法转换成es5语法，但如果是在es5中，有些对象，方法实际在浏览器中可能是不支持的，例如：promise array.prototype.includes,这时候就需要@babel/polyfill来做模拟。@babel/polyfill虽然可以解决模拟不存在对象方法的事情，但是有以下两个问题：

• 直接修改内置的原型，造成全局污染
• 无法按需引入，webpack打包时，会把所有的polyfill都加载进来，导致产出文件过大

为了解决这个问题，Babel社区又提出了@babel/runtime的方案，@babel/runtime不再修改原型，而是采用替换的方式，比如我们用promise，使用@babel/polyfill会产生一个window.promise对象，而@babel/runtime则会生成一个_promise（实例）来替换我们代码中用到的promise，另外@babel/runtime还支持按需引入。

babel使用方式总结

安装 : npm i @babel/core @babel/cli -D
安装套餐: npm i @babel/preset -D
安装衬垫: npm i @babel/polyfill
安装commonjs的打包工具,browserify : npm i browserify -D
创建babel的配置文件: .babelrc
    {
        "presets": ["@babel/preset-env"]
    }
配置npm脚本: package.json
    "scripts": {
        "babel": "babel ./src/js/index.js -o ./dist/js/index.js",
        "brow" :" browserify ./dist/js/index.js -o ./dist/js/index.min.js",
        "start": "npm run babel && npm run brow"
      }
编译打包文件
    npm start

babel注意点

1. 按需引入衬垫
    安装: npm install core-js@3 --save
    删除import "@babel/polyfill"
    修改.babelrc
        {
          "presets": [
            [
              "@babel/preset-env",
              {
                "useBuiltIns":"usage",
                "corejs":3
              }
            ]
          ]
        }

2. 如何在不影响全局环境的情况下,生成衬垫(类库开发)
    安装: npm i @babel/runtime @babel/plugin-transform-runtime -D
    安装: npm i @babel/runtime-corejs3
    修改.babelrc:
        {
          "presets": ["@babel/preset-env"],
          "plugins": [
            [
              "@babel/plugin-transform-runtime",
              {
                "corejs":3
              }
            ]
          ]
        }

npm命令请缓存

npm初始化项目 : npm init
npm安装包     : npm i 包名 -D
查看包的完整信息: npm info 包名
查看全局安装目录: npm root -g
npm清缓存     : npm cache clean -f
强制清除npm缓存：npm npm-cache clean -f 

npm 源

查看源：npm get registry 

下载包：切换到淘宝镜像：npm config set registry http://registry.npm.taobao.org/

上传包：切换到国外镜像：npm config set registry https://registry.npmjs.org/