01 node.js,npm,es6入门
Node.js安装
1、下载对应你系统的Node.js版本:
https://nodejs.org/en/download/
命令提示符下输入命令
node -v
会显示当前node的版本
快速入门
1 控制台输出
如何在控制台输出,创建文本文件demo1.js,代码内容
var a=1;
var b=2;
console.log(a+b);
在命令提示符下输入命令
node demo1.js
2 使用函数
创建文本文件demo2.js
var c=add(100,200);
console.log(c);
function add(a,b){
return a+b;
}
命令提示符输入命令
node demo2.js
运行后看到输出结果为300
3 模块化编程
创建文本文件demo3_1.js
exports.add=function(a,b){
return a+b;
}
创建文本文件demo3_2.js
var demo= require('./demo3_1');
console.log(demo.add(400,600));
在命令提示符下输入命令
node demo3_2.js
结果为1000
4 创建web服务器
创建文本文件demo4.js
http为内置模块
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello World\n');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
http为node内置的web模块
在命令提示符下输入命令
node demo4.js
服务启动后,我们打开浏览器,输入网址
即可看到网页输出结果Hello World
Ctrl+c 终止运行。
5 理解服务端渲染
创建demo5.js ,将上边的例子写成循环的形式
var http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
for(var i=0;i<10;i++){
response.write('Hello World\n');
}
response.end('');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
我们在命令提示符下输入命令启动服务
node demo5.js
浏览器地址栏输入http://127.0.0.1:8888即可看到查询结果。
右键“查看源代码”发现,并没有我们写的for循环语句,而是直接的10条Hello World ,这就说明这个循环是在服务端完成的,而非浏览器(客户端)来完成。这与我们原来的JSP很是相似。
6 接收参数
创建demo6.js
var http = require('http');
var url = require('url');
http.createServer(function(request, response){
response.writeHead(200, {'Content-Type': 'text/plain'});
// 解析 url 参数
var params = url.parse(request.url, true).query;
response.write("name:" + params.name);
response.write("\n");
response.end();
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');
我们在命令提示符下输入命令
node demo6.js
在浏览器测试结果http://localhost:8888/?name=1
包资源管理器NPM
什么是NPM
npm全称Node Package Manager,他是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven .
我们通过npm 可以很方便地下载js库,管理前端工程.
最近版本的node.js已经集成了npm工具,在命令提示符输入 npm -v 可查看当前npm版本
NPM命令
1 初始化工程
init命令是工程初始化命令。
建立一个空文件夹,在命令提示符进入该文件夹 执行命令初始化
npm init
按照提示输入相关信息,如果是用默认值则直接回车即可。
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词,便于用户搜索到我们的项目
最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
我们之后也可以根据需要进行修改。
本地安装
install命令用于安装某个模块,如果我们想安装express模块(node的web框架),输出命令如下:
npm install express
出现黄色的是警告信息,可以忽略,请放心,你已经成功执行了该命令。
在该目录下已经出现了一个node_modules文件夹 和package-lock.json
node_modules文件夹用于存放下载的js库(相当于maven的本地仓库)
package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖,以便后续重新安装的时候生成相同的依赖,而忽略项目开发过程中有些依赖已经发生的更新。
我们再打开package.json文件,发现刚才下载的express已经添加到依赖列表中了.
关于版本号定义:
指定版本:比如1.2.2,遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版本。
波浪号(tilde)+指定版本:比如~1.2.2,表示安装1.2.x的最新版本(不低于1.2.2),但是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。
插入号(caret)+指定版本:比如ˆ1.2.2,表示安装1.x.x的最新版本(不低于1.2.2),但是不安装2.x.x,也就是说安装时不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。
latest:安装最新版本。
全局安装
全局目录在哪里,执行命令
npm root -g
全局安装jquery, 输入以下命令
npm install jquery -g
批量下载
进入目录(package.json所在的目录)输入命令
npm install
淘宝NPM镜像
输入命令,进行全局安装淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看cnpm的版本
cnpm -v
使用cnpm
cnpm install 需要下载的js库
运行工程
使用run命令
如果package.json中定义的脚本如下
dev是开发阶段测试运行
build是构建编译工程
lint 是运行js代码检测
我们现在来试一下运行dev
npm run dev
编译工程
npm run build
会生成dist文件夹
Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
Webpack安装
全局安装
npm install webpack -g
npm install webpack-cli -g
安装后查看版本号
webpack -v
JS打包
(1)创建src文件夹,创建bar.js
exports.info=function(str){
document.write(str);
}
(2)src下创建logic.js
exports.add=function(a,b){
return a+b;
}
(3)src下创建main.js
var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));
(4)创建配置文件webpack.config.js ,该文件与src处于同级目录
var path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
};
以上代码的意思是:读取当前目录下src文件夹中的main.js(入口文件)内容,把对应的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js
(5)执行编译命令
webpack
执行后查看bundle.js 会发现里面包含了上面两个js文件的内容
(7)创建index.html ,引用bundle.js
<!doctype html>
<html>
<head>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
测试调用index.html,会发现有内容输出
CSS打包
(1)安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件,css-loader 是将 css 装载到 javascript;style-loader 是让 javascript 认识css
cnpm install style-loader css-loader --save-dev
--save-dev开发时依赖
(2)修改webpack.config.js
var path = require("path");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
(3)在src文件夹创建css文件夹,css文件夹下创建css1
body{
background:red;
}
(4)修改main.js ,引入css1.css
require('./css/css1.css');
(5)重新运行webpack
(6)运行index.html背景变成红色
ES6
ECMAScript 6.0是JavaScript语言的下一代标准
Node.js中使用ES6
ES6+ 很多高级功能node是不支持的,就需要使用babel转换成ES5
(1)babel转换配置,项目根目录添加.babelrc 文件
{
"presets" : ['es2015']
}
(2)安装es6转换模块
cnpm install babel-preset-es2015 --save-dev
(3)全局安装命令行工具
cnpm install babel-cli -g
(4)使用
babel-node js文件名
语法新特性
变量声明let
ES6以前,var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
以上的代码实际上是:
function aa() {
var test // 变量提升
if(bool) {
test = 'hello man'
} else {
//此处访问test 值为undefined
console.log(test)
}
//此处访问test 值为undefined
}
所以不用关心bool是否为true or false。实际上,无论如何test都会被创建声明。
ES6:
通常用let和const来声明,let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域?在一个函数内部 ,在一个代码块内部。看以下代码
function aa() {
if(bool) {
let test = 'hello man'
} else {
//test 在此处访问不到
console.log(test)
}
}
常量声明
const 用于声明常量,看以下代码
const name = 'lux'
name = 'joe' //再次赋值此时会报错
模板字符串
第一个用途,基本的字符串格式化
//es5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
第二个用途,多行字符串或者字符串一行行拼接
// es5
var msg = "Hi \
man!"
// es6
const template = `<div>
<span>hello world</span>
</div>`
函数默认参数
在定义函数时便初始化了这个参数
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
箭头函数
箭头函数最直观的三个特点:
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字
看下面代码(ES6)
add=(response,message) => {
return a+b;
}
或
add = (a,b)=>a+b;
相当于ES5代码
add=function(response,message){
return a+b;
}
//函数优化
//例子1
eat1=function(foot){
console.log(foot);
};
eat=foot=>console.log(foot);
eat1("鱼");
eat("鱼");
//例子2
eat1=function(f1,f2){
console.log(f1+":"+f2);
};
eat=(f1,f2)=>console.log(f1+":"+f2);
eat("鱼","虾");
eat1("鱼","虾");
//例子3
const p = {
name:"xiaoming",
age:12
};
function hello(p) {
console.log("hello,"+p.name)
}
hello(p);
//简化
const hi = ({name}) => console.log("hi,"+name);
hi(p);
对象初始化简写
ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如
function people(name, age) {
return {
name: name,
age: age
};
}
console.log(JSON.stringify(people('aa',11)));
以上代码可以简写为
function people(name, age) {
return {
name,
age
};
}
console.log(JSON.stringify(people('aa',11)));
{"name":"aa","age":11}
解构
将一个数据结构分解为更小的部分的过程
ES5提取对象中的信息形式如下
const people = {
name: 'lux',
age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
ES6,例如
//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
//其他例子
//取数组
let arr = [2,3,4,5];
let [,...rest] = arr;
console.log(rest); // [ 3, 4, 5 ]
let [a,,b] = arr;
console.log(a,b);//2 4
//取对象
p = {name:"a",age:1,other:{name:"b",age:2}};
let {other:{name}} = p;
console.log(name);//b
let{...o} = p;
console.log(o);//{ name: 'a', age: 1, other: { name: 'b', age: 2 } }
console.log(0==p);//false
Spread Operator
Spread Operator是三个点儿...
组装对象或者数组
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
map和reduce
map()
:接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回。
// 例子
let arr = ['1','2','3','4'];
let arr2 = arr.map(i=>parseInt(i)+1);
console.log(arr2);//[ 2, 3, 4, 5 ]
reduce()
:接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
- 参数三相当于上一次reduce处理的结果的初始值
//例子
let arr3 = [0,1,2,3];
let arr4 = arr3.reduce((a,b)=>{console.log(a+b);return a+b},1);
console.log(arr4);
// 1
// 2
// 4
// 7
// 7
import 和 export
import导入模块、export导出模块
lib.js
let fn0=function(){
console.log('fn0...');
}
export {fn0}
demo9.js
import {fn0} from './lib'
fn0();
注意:node(v8.x)本身并不支持import关键字,所以我们需要使用babel的命令行工具来执行
babel-node demo9
Promise 是异步编程:略
01 node.js,npm,es6入门的更多相关文章
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
- 让 Node.js 支持 ES6 的语法
为了让 Node.js 支持 ES6 的语法, 需要使用 Babel. 安装 es-checker 在使用 Babel 之前 , 我们先检测一下当前 node 对 es6 的支持情况. 在命令行下执行 ...
- Latest node.js & npm installation on Ubuntu 12.04
转自:https://rtcamp.com/tutorials/nodejs/node-js-npm-install-ubuntu/ Compiling is way to go for many b ...
- Node.js npm
Node程序包管理器(NPM)提供了以下两个主要功能: 在线存储库的Node.js包/模块,可搜索 search.nodejs.org 命令行实用程序来安装Node.js的包,做版本管理和Node.j ...
- 自制node.js + npm绿色版
自制node.js + npm绿色版 Node.js官网有各平台的安装包下载,不想折腾的可以直接下载安装,下面说下windows平台下如何制作绿色版node,以方便迁移. 获取node.exe下载 ...
- Mac 下搭建环境 homebrew/git/node.js/npm/vsCode...
主要记录一下 homebrew/git/node.js/npm/mysql 的命令行安装 1. 首先安装 homebrew 也是一个包管理工具: mac 里打开终端命令行工具,粘下面一行回车安装br ...
- Node.js API快速入门
Node.js API 快速入门 一.事件EventEmitter const EventEmitter = require('events'); class MyEmitter extends Ev ...
- Node.js npm基础安装配置&创建第一个VUE项目
使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...
- Node.js NPM Package.json
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json Nod ...
- Node.js NPM 包(Package)
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json 包是打 ...
随机推荐
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- css3 居中(推荐弹性盒模型方式)
参考 http://www.zhihu.com/question/20774514 http://caibaojian.com/demo/flexbox/align-items.html 例子:ht ...
- FFT模板(无讲解)
#include<bits/stdc++.h> using namespace std; ; const double pi=3.1415926535898; ],len; struct ...
- MariaDB Role
一.MariaDB Role介绍 MariaDB从10.0/10.1版本开始支持role. Role相当于各种权限的集合,可以给多个账户统一权限的修改直接通过修改role来实现,不需要每个账户一个一个 ...
- Java获取系统时间的四种方法
1.Date day=new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); ...
- bs4 CSS选择器
#https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-all #beautifulSoup可以解析HTML ...
- 安装babel
http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/
- Asp.Net WebApi核心对象解析(一)
生活需要自己慢慢去体验和思考,对于知识也是如此.匆匆忙忙的生活,让人不知道自己一天到晚都在干些什么,似乎每天都在忙,但又好似不知道自己到底在忙些什么.不过也无所谓,只要我们知道最后想要什么就行.不管怎 ...
- Android : alsa-lib 移植
一.官网下载lib源码 网址:http://www.alsa-project.org/main/index.php/Download#alsa-lib 左击:Stable Release列表中的[1. ...
- L253 Work and Pleasure
To be really happy and really safe, one ought to have at least two or three hobbies, and they must a ...