前端基础(一)之node-npm-babel-js模块化

1.Vue环境准备

编辑器Vscode下载

地址：https://code.visualstudio.com/（microsoft开源，开箱即用）

插件安装：

ESlint：主要用做ES语法检测

安装Node.js

地址：http://nodejs.cn/
安装前先install python（建议2.0和nodejs配套）

什么是node.js?

Node.js是可以直接再服务端运行js代码，基于chrome的V8引擎，可以脱离浏览器来执行js代码；性能比较好；

检查install结果

2.初尝nodejs：

1.创建文件夹nodejs

2.创建文件learning-01.js

console.log("hello,this is my first js script")

3.运行js程序

node xxx.js

4.node服务器开发小试

代码

const http = require('http');

http.createServer(function(request, response){
    response.writeHead(200, {'Content-Type': 'text/plain'})
    response.end('hello,node server')
}).listen(8080)

console.log("Server running at http://localhost:8080")

运行结果：

2.NPM包管理

1.什么是npm(Node Package Manager)

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。类似于maven，所有东西只要导入依赖即可，npm也是如此：npm install；好比Linux的yum安装

2.npm使用

初始化

初始化结果

使用命令

npm init
npm init -y //finish the initialization by default value

3.修改npm镜像address

查看npm的配置信息
vpm config list

修改配置
npm config set registry “https://registry.npm.taobao.org”

4.使用npm安装包

1.安装依赖

command：
npm install jquery

the reusult of installing
package.json is where managed the version control for all dependencies，like pom.xml in maven

2.指定版本安装

command
npm install jquery@2.1.1

3.指定开发分支安装

npm install --save-dev eslint
npm install --save-D eslint //same as former

the result of installing

4.全局安装

npm install -g webpack

5.其他命令

npm update // update all dependencies
npm update jquery // update the specified package based on the first version x.1.1
//Or just modify the value of  the version in the package.json

npm uninstall jquery // install the specified package

3.Babel

很多se6高级语法，浏览器是不支持的，Nodejs也不一定能运行！
转码器
Babel是一个广泛的转码器！可以将ES6代码转换未ES5的代码！语法会自动转换！

1.安装babel

npm install -g babel-cli

2.查看版本

3.使用babel

• 在src编写js源码

let input = [1, 2, 3]
input = input.map(item => item + 1)
console.log(input)

• 在根目录编写.babelrc配置文件

{
    "presets": [
        "es2015"
    ],
    "plugins": []

}

• 安装babel依赖

npm install -D babel-perset-es2015

• 输出测试

babel .\src\example.js --out-file .\dist1\dist.js

• 编译后结果

"use strict";

var input = [1, 2, 3];
input = input.map(function (item) {
 return item + 1;
});
console.log(input);

• 对比结果
  
• 使用脚本执行脚本编译

在package.json中设置

npm run test

4.VSCode使用label命令报错解决

• 报错

babel : 无法加载文件 C:\Users\yanghai\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。

• 解决方案
  使用cmd命令重新执行命令即可
  

4.模块化

发展

网站一步一步变成互联网化，js代码越来越大，十分复杂！
js开始走向模块化
class,package,moudle

• CommonJS规范
• ES6模块化

commonJS规范使用

1.定义commonJS并导出module

const sum = (a, b) => a + b
const sub = (a, b) => a - b
const mul = (a, b) => a * b
const div = (a, b) => a / b

//export the methods for the others
// module.exports = {
//     sum:sum,
//     sub:sub,
//     mul:mul,
//     div:div
// }

//abbreviate if there are the same name
module.exports = {
    sum,
    sub,
    mul,
    div
}

2.导入module使用

const cal = require('./caculate.js')
console.log(cal)  /*{
    sum: [Function: sum],
    sub: [Function: sub],
    mul: [Function: mul],
    div: [Function: div]
  }*/

const r1 = cal.sum(1, 99)
console.log(r1)  //100

ES6模块化规范
1.单独导出导入

export function getList() {
    console.log('get the user list')
}

export function saveList() {
    console.log('save the user information')
}

//node doesn't support the import
import {getList, saveList} from './userApi.js'

getList()
saveList()

ES6第二种写法

export default {
    getList2(){
        console.log('get the user list')
    },

    saveList2(){
        console.log('save the user list')
    }

}

import user from './userApi.js'
user.getList2()
user.saveList2()

注意： node doesn’t support the module of ES6 ,needs the label transferred meaning