前端开发2

1. NPM

1.1 npm是什么

1. 后端开发中，maven构建项目，管理jar依赖，联网下载依赖
2. npm类似于前端的maven，管理js依赖，联网下载js依赖

1.2 npm安装

1. nodejs会默认把npm带上 npm -v

1.3 npm具体操作

1. npm项目初始化前端项目
   npm init -y -> package.json (类似于后端的pom.xml文件)

2. npm下载js依赖

   • 配置npm镜像：https://npm.taobao.org/ 保证下载更快

   npm config set registry https://registry.npm.taobao.org
   

   • npm install 依赖名称@版本号

     package.json文件中的dependencies属性，会记录下载的依赖

     package.lock.json文件，记录下载的依赖的版本号(锁定当前版本号)

     node_modules文件夹，存放下载的依赖

3. 根据package.json文件下载依赖

   • npm install

4. 删除依赖

   • npm uninstall 依赖名称

5. 安装插件

   • 当前环境
     npm install -D 依赖名称
   • 全局安装
     npm install -g 依赖名称

2. babel

2.1 babel是什么

babel转码器，把es6转换成es5，因为es6代码浏览器兼容器很差，但开发简单，而es5代码浏览器兼容性很好，所以使用babel转码器把es6转换成es5

2.2 babel安装

1. npm install --global babel-cli
2. babel --version

2.3 babel具体操作

1. 创建es6文件，使用es6语法

       // 转码前
       // 定义数据
       let input = [1, 2, 3]
       // 将数组的每个元素 +1
       input = input.map(item => item + 1)
       console.log(input)
   

2. 创建babel配置文件.babelrc

       {
           "presets": ["env"]
           "plugins": []
       }
   

3. 安装es2015的转码器

       npm install --save-dev babel-preset-env
   

4. 执行转码

      #1.根据文件转换
       babel src/index.js -o dist/index.js
      #2.根据目录转换
       babel src -d dist