Ts基础：

//自动生成tsconfig.json文件 tsc —init
//命令行执行tsc -w 可以对所有ts文件进行监视，若有修改则会自动重新编译。
//执行命令：tsc xxx.ts node xxx.js

// 类型声明是TS非常重要的一个特点
// 通过类型声明可以指定TS中变量（参数、形参）的类型
// 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
// 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

// ts中的类型：

// 学过js你认识的类型：boolean、number、string、undefined、null、symbol、bigint、object
// 你可能不认识的类型：void、any、unknown、never
// 如果我们在声明变量指定类型后，之后如果给变量赋值为其他类型的值，编辑器会报错，如图所示
let a:number
a = 10
// a = “10”//报错

// 自动类型判断

// TS拥有自动的类型判断机制
// 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
// 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
let b = 10
// b = “10”//报错

// 函数类型方式：

函数参数和函数返回值必须设置类型 此外ts会自动的对参数个数也进行限制
function sum(a:number , b:number):number{
return a+b
}
console.log(sum(1,2))

//void类型：

其实我们知道，在JavaScript中，如果定义一个函数不写返回值，那么它默认是返回 undefined 的什么都不返回 有以下三种
//也就是说只有null和undefined可以赋给void,其实在JS中void是一种操作符，可以让任何表达式返回undefined
function add1():void{

}
function add2():void{
return
}
function add3():void{
return undefined
}

// any类型：

// any 表示的是任意类型，一个变量设置类型为 any 后，相当于对该变量关闭了TS的类型检测。
// 隐式any：如果只声明变量不指定类型也不给变量赋值，变量就是any类型的
// 当把any类型的变量可以赋值给其他类型的变量，不会报错
// any类型是多人协作项目的大忌，很可能把Typescript变成AnyScript，通常在不得已的情况下，不应该首先考虑使用此类型。

let d: any
d = ‘1’
d = 1
let c:string = ‘123’
c = d

// unknown类型:

// 开发的时候有些变量就是事先不知道的类型怎么办呢？可以使用unknown
// unknown与any的区别就是，将unknown类型变量赋值给其他任意类型的变量时，会报错
// 可以这样理解：unknown类型的变量就是类型安全的any，不能直接赋值给其他类型的变量
// 需要在赋值之前做好类型判断 （这叫缩小类型范围）
let e: unknown
e = 123
let f= 456
// f = e//会报错

// 可以进行判断 不会报错
if(typeof e === ‘number’)
{
f = e
}

// never类型:

// never 表示永远不会返回结果 never：空值，常用于表示表示函数没有返回结果 function fn(): never{}，可用于死循环或者函数抛出异常，实际应用在检测代码对函数的错误修改，而对never类型的变量赋值
// function add4():never{
// throw new Error(‘报错了！’)
// }

//enum：枚举的使用

// 平时我们存储男、女这些字符串，数据库占用空间大，像这种在几个值之间选择的情况，可以用枚举替代字符串
// 当然，我们可以不写值，此时Male、Female默认0、1
enum Gender {
Male = 1,
Female = 0
}
let i: { name: string, gender: Gender } = {
name: ‘Allen’,
gender: Gender.Male
}
console.log(i.gender === Gender.Male); //true
console.log(Gender[‘Male’]); //1
console.log(Gender[1]);

//对象类型

//一般来说，我们对于对象的类型检查一般是检查对象中有哪些属性，属性是什么类型。可以用{} 来指定对象中可以包含哪些属性 语法：{属性名: 属性类型, …}
let person:object
person={
name:’qcq’,
age:18
}
// person = 1//会报错
//定义对象
let obj1:{
name:string,
age:number
}={
name:’qcq’,
age:18
}
//可选属性，在属性名后面加一个 ?（可以对这个属性赋值，也可以不赋值）
let obj2:{
name:string,
age?:number
}
obj2 = {name:’lr’,age:20}
obj2 = {name:’ha’}
// 如果后续属性不确定叫什么名字，也不确定是什么类型，那么可以这样写[propName: string]: unknown
let obj3:{
name:string,
[propName: string]: unknown
}
obj3 = {name: ‘yk’, age: 18, gender: ‘male’}

// 函数类型：

// 因为function是关键字，所有这里用Function来声明函数
// 和对象一样，我们一般会限制函数有几个参数，参数的类型，返回值的类型，所以就可以以一种类似箭头函数的方式来声明一个函数类型的变量
let fun:Function
fun=function(){}
// fun = 1//会报错

function sum2(a:number , b:number):number{
return a+b
}
sum2(1,2)

let fun1:(a:number,b:number)=>number=(a,b)=>{
return a+b
}
fun1(1,2)

//数组类型

用来限制数组元素的类型
// 比较常用的就是这种方式: 在元素类型后面接上 []:
const arr:number[] =[1,2,3,4]
const arr2:string[] =[‘1’,’2’,’3’]

//元组 Tuple 类型

// 元组是TS新出的类型，表示固定长度的array
// 元组中包含的元素，必须与声明的类型一致，而且不能多、不能少，甚至顺序都不能不一样
const arr3:[number,string]=[1,’2’]
// const arr4:[number,string]=[1,’2’,’3’]//会报错

//字面量类型

//也可以使用字面量去指定变量的类型，这相当于给他设置成了一个常量
let g:10
g = 10
// g = 11//会报错

//联合类型

//可以给一个变量定义一个联合类型，类型名之间用 | 隔开 。这个时候，字面量类型就有用了，此时sex只能被赋值成两个值

let sex:’male’ | ‘female’
sex = ‘male’
sex = ‘female’
// sex = ‘females’//会报错

//类型断言

// 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
// 第一种
let someValue1: unknown = “this is a string”;
let strLength1: number = (someValue1 as string).length;

// 第二种
let someValue: unknown = “this is a string”;
let strLength: number = (someValue).length;

// 类

class Car {
// 字段
engine:string;

// 构造函数

constructor(engine:string) {
this.engine = engine
}

// 方法

disp():void {
console.log(“发动机为 : “+this.engine)
}
}

//类的继承

class Shape {
Area:number

constructor(a:number) {
this.Area = a
}
}

class Circle extends Shape {
disp():void {
console.log(“圆的面积: “+this.Area)
}
}

var obj = new Circle(223);
obj.disp()
//不支持继承多个类，但支持继承多重类
class Root {
str:string;
constructor(str:string) {
this.str = str
}
}

class Child extends Root {}
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类

var obj10 = new Leaf(‘qcq’);
obj10.str =”hello”
console.log(obj10.str)
//继承类的方法重写
class PrinterClass {
doPrint():void {
console.log(“父类的 doPrint() 方法。”)
}
}

class StringPrinter extends PrinterClass {
doPrint():void {
super.doPrint() // 调用父类的函数
console.log(“子类的 doPrint()方法。”)
}
}

// 访问控制修饰符

// TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。
// public（默认） : 公有，可以在任何地方被访问。
// protected : 受保护，可以被其自身以及其子类访问。
// private : 私有，只能被其定义所在的类访问。
// 以下实例定义了两个变量 str1 和 str2，str1 为 public，str2 为 private，实例化后可以访问 str1，如果要访问 str2 则会编译错误。
//public，可以在任意位置访问 / 修改，默认值
// private，私有属性，私有属性只能在类内部进行访问 / 修改，子类也不能访问 / 修改
// 通过在类中添加方法使得私有属性可以被外部访问
// （但是却可以通过 (实例as any).私有属性进行访问。。不过有另外一种设置私有的方式，就是 #变量，并且还要在tsconfig.json对 lib 、target 进行配置）
// protected，受保护属性，仅能在当前类 or 当前类的子类中访问 / 修改
class Encapsulate {
public str1:string = “hello”
private str2:string = “world”
speak(){
console.log(this.str2)
}
}

var obj11 = new Encapsulate()
console.log(obj11.str1) // 可访问
obj11.speak()
// console.log(obj11.str2) // 编译错误， str2 是私有的

// 读写语法糖

// 但是TS内帮我们提供了读写属性的方法（语法糖）
// 实际上是应用了Object.defineProperty()的get和set （在使用get函数后，get后面的变量将自动保存为该实例的变量，比如 get Name()，然后类似于在类里添加了 this.Name,）
// TS设置getter、setter的方式以下所示
class Person {
private _name: string;
private _age: number;
constructor(name: string, age: number) {
this._name = name;
this._age = age;
}
get name() {
console.log(“我被执行了”);
return this._name
//此时在类外面，通过实例对象.name依然可以获取，即使获取格式看似像是和以前相同
// 但是获取方式已经和以往完全不一样了，是通过函数获取的
}
get age() {
return this._age
}
set age(age: number) {
if (age > 0)
this._age = age;
}
}
const Bruce = new Person(“Bruce”, 18);
//可以，此时.name并不是找属性，而是找是否有get name方法
console.log(Bruce.name); //我被执行了
//数值大于0，可以执行
Bruce.age = 20;

// 抽象类

// 有时候，我们创建一个类，主要是为了作为多个类的父类，让子类通过继承得到共有的属性和方法，比如创建一个Animal类，然后让Cat、Dog类继承Animal类

// 以abstract开头的为抽象类，抽象类其实和其他类差别不大，只是不能用来创建对象，也就是专门用于继承的类
// 抽象类中可以添加抽象方法
// 抽象方法，使用abstract开头，没有方法体
// 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
abstract class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
abstract say(): void;
}

class Dog extends Animal {
say() {
console.log(“gogogo”);
}
}

// 泛型

// 在JavaScript中，封装一个API可以具有多种用途，因为其实弱类型语言，但是就因为是弱类型可以最终得到的结果并不是我们想要的。

// TypeScript的出现正好中解决了这个问题，但是考虑到API的复用时，TypeScript又显得不是这么的灵活。这个时候可以使用any类型来解决不灵活的问题，但是又回到JavaScript中的问题，得到最终的结果可能不是预期的那个样子。

// 为了解决这种情况，TypeScript推出了泛型 的概念，使用泛型可以在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型，这样做的目的是为了更大程度的来复用我们的代码。

// 类和接口

// 类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。
// 以下实例红 AgriLoan 类实现了 ILoan 接口：
interface ILoan {
interest:number
}
class AgriLoan implements ILoan {
interest:number
rebate:number

constructor(interest:number,rebate:number) {
this.interest = interest
this.rebate = rebate
}
}
var obj12 = new AgriLoan(10,1)
console.log(“利润为 : “+obj12.interest+”，抽成为 : “+obj12.rebate )

//接口

// 在typescript基础中，我们学习到了自定义类型的写法；

// 而接口就是用来定义一个类的结构即类中应该包含哪些属性和方法（我个人理解为，实际上接口也可能看成一种自定义类型，该类型一定要包含接口的规范）

// 实际上又不一定仅限于定义类的结构，也可以作为一种类型去使用，比如用 :myInterface规范类型， 所以才导致出现type 和 interface都可以使用的场景，所以接口也可以当成类型声明去使用

// 自定义类型

type myType2 = {
name: string,
age: number
}
const obj13: myType2 = {
name:”allen”,
age:18
}

// 该接口规定了我们定义了一个类，该类一定有两个属性，一个是name，一个是age
interface myInterface1 {
name: string;
age:number
}
const obj14: myInterface1 = {
name: ‘allen’,
age: 18
}

// （1）接口 VS 自定义类型 VS抽象类

// 1.接口可以同名进行重复声明：比如之前定义了 type myType，后面不能重复定义该类型；而前面个定义了 interface myInterface，后面依旧可以再次定义 interface myInterface（这两个 myInterface会进行合并）

interface myInterface{
name: string;
age:number
}
interface myInterface{
gender:string
} //两个会发生合并，这种语法在TS里是合理的
// 2.接口可以在定义类的时候，限制类的结构（这一点有点像在继承抽象类）

// 接口中所有属性都不能有实际的值（但是抽象类可以定义实际的值）
// 接口中的方法都是抽象方法（但是抽象类可以有非抽象方法）
// 定义类时让类去实现（implement）这个接口

interface myInterface{
name: string;
saySomething(): void; //抽象方法
}
// 实现接口，实现接口就是使类满足接口要求
// class MyClass implements myInterface{
// name: string;
// constructor(name:string) {
// this.name = name;
// }
// saySomething(): void {
// throw new Error(“Method not implemented.”);
// }
// }
// 3.接口可以实现多个,互相实现,抽象类的子类却只能继承一个抽象类；抽象类只针对类，接口其实也可以应用于函数、属性等

// 总而言之，接口就相当于一个规范，实现了接口，即满足了规范，就可以在指定场景中进行使用

// 推荐加点：

// 如果是定义非对象类型，推荐使用type
// 对象类型推荐使用 interface
// 接口的应用场景（很愿意以接口的方式来实现）：

// 后台接口
// 第三方和开发的SDK，比如Vue
// 前端的库
// 正常的开发任务来说，interface、type都差不多，type更直接更方便

// （2）属性接口

// 使用场景：我们如果向约束传入参数是作为一个 string类型，可以直接

// function fn(params: string){}
// 但如果我们需要传入一个参数，它是一个对象，但是我们要求这个对象里的某个属性（或者多个属性），必须为 string类型，我们可以使用属性接口

//对传入对象里面的属性进行约束
interface FullName{
firstName:string;
lastName:string
}
function printName(name: FullName){}
// freshness擦除

// 通常情况下，属性接口的实现在TS检测时进行类型推断，如果有多出来的属性，则不能通过

interface IPerson {
name: string
age: number
}
const p2: IPerson = {
name: ‘allen’,
age: 18
// sex: ‘male’ //报错
}
// 但是如果通过引用地址的方式进行赋值时，TS检测会把多出来的属性进行freshness擦除掉，此时达到了满足条件，则不会报错

interface IPerson {
name: string
age: number
}
const info = {
name: ‘allen’,
age: 18,
sex: ‘male’
}
const p: IPerson = info
// 因此以后在通过函数传入参数时，参数指定属性接口，可以用引用的方式，传递相对接口规定的属性的有多余属性的对象

function fn3(p: IPerson) {
console.log(p);
}
fn3(info);

// （3）函数类型接口

// 对函数方法进行约束 / 批量约束

interface myInterface{
//参数为两个string类型，返回参数为string类型
(key:string, value:string):string
}
// const fn3: myInterface = (a: string, b: string) => a + b;

// （4）可索引接口

// 也可以看成针对数组、对象索引的接口

//针对数组索引
interface myArr{
[index:number]:string
}
let arr10:myArr = [‘allen’, ‘bruce’]

//针对对象索引值的约束
interface myObj{
[index:string]:string
}
let obj16:myObj = {name:’allen’}

// （5）类类型接口

// //类类型接口，也就是最上方类对接口的实现，和抽象类类似
interface myClass{
name: string;
action(params:String):void
}
interface myClass2{
//…
}
class Me implements myClass, myClass2{
name = ‘Allen’;
action() {}
}

// （6）接口继承

// 使用extends，接口可以实现对其他接口的继承，可以对接口进行拓展

// 注意：类的继承只能实现单继承，但是接口可以实现多个接口

interface Animals{
eat(): void;
}
interface Person extends Animals{
work(): void;
}
//这里再套一个baby类进行类的继承
class baby{}
// class People extends baby implements Person{
// eat() { }
// work(){}
// }

super指的是当前类的父类
抽象类就是其他类的父类就是被用来继承的
接口就是用来定义 类的结构
interface开头 myinterface{
name:string,
age:number
}
规定类的结构 和内部属性 类中应该包含哪些属性和方法 接口也可以当成类型声明去使用 接口可以重复声明
限制类的结构 所有属性都不能有实际的值 只定义对象的结构 而不考虑实际值 像似于抽象类
但抽象类可以有普通方法也可以有抽象方法 是需要继承extends的 而接口不能有自己的方法是实现的implement
用类实现接口 就是让类满足接口的要求 接口就是定义的一个规范

属性的封装
属性可以被任意修改将会导致对象中的数据变得非常不安全
私有属性可以在类内部使用get和set方法去操作属性 可以在set方法里去设置 当这个值小于0时 不让设置if(value>=0){this._age = value}
procted只能在类中访问 包括当前类和当前类的子类

遇到不确定的类型any会关闭ts中类型检查
定义函数或 类时 遇到类型不明确时 使用泛型
function fn(a:T):T{
return a
}
可以直接调用具有泛型的函数
fn(a:10)//不指定泛型自动推断
fn(a:’hello’)

function fn2(a:T,b:K):T{
console.log(b)
return a
}

T泛型是Inter的实现类
interface Inter{
length:number
}
function fn3(a:T):number{
//表示T这个泛型实现了Inter接口 用extends
return a.length
}
fn3(a:’123’)传的值要有length属性

类型不明确时整个变量 变量就是我们的类型

Webpack打包Ts

自动生成tsconfig.json文件 tsc —init
tsconfig配置文件+tsc命令 就可以直接把所要编译的文件都编译好
配置文件的作用：配置ts文件的编译信息，根据这些信息对文件进行自动编译
tsconfig是ts编译器的意目录配置文件，ts编译器可以根据它的信息来对代码进行编译
然后在命令行执行tsc -w 可以对所有ts文件进行监视，会生成编译文件 当指定了编译路径后 outDir

include指定哪些ts文件需要被编译 任意文件 *任意目录
exclude 不需要被编译的文件目录 有默认值 不用管
extends 可以继承已经有的配置文件
compilerOptions{//编译器选项
target 用来指定ts编译为es的版本 es2015
module 指定要使用的模块化的规范
lib用来指定项目中的库，一般情况不改
outDir指定编译后文件所在的目录
outFile:’地址’ 设置后将所有全局作用域中的代码合并到同一个文件中 ，合并模块化文件时 module要设置为system
allowJs 默认是false 是否对js文件进行编译 编译到ts编译后的目录中
checkJs 默认值false 是否检查js代码是否符合语法规范
removeComments 是否移除注释
noEmit默认值true 不生成编译后的文件
noEmitOnError 当有错误时 不生成编译后的文件,编译严格
alwayStrict 默认值false 用来设置编译后的文件是否使用严格模式 ‘use strict’ 有export和import时自动严格模式
noImplictAny true 不允许隐式any类型
noImplictThis true 不允许不明确类型的this
strictNullChecks true 严格的检查空值
strict true 严格检查的总开关

}

用webpack如何去对代码编译
1.初始化项目 npm init -y 项目下生成package.json 用来管理项目指明项目中的依赖和命令
2.安装webpack所使用的依赖 i是install -D是开发依赖 开发用的
npm i -D webpack webpack-cli typescript ts-loader
webpack打包工具 webpack-cli 命令行工具（通过命令行去使用webpack） typescript ts-loader（整合webpack和typescript）ts编译器
项目中中会出现node_modules文件

webpack中使用要先安装相关loader，官方建议安装awesome-typescript-loader(因为它比ts-loader更快)：
npm install awesome-typescript-loader source-map-loader —save-dev
webpack.config.js设置如下(要把awesome-typescript-loader放在ts的所有loader之前)。

3.在根目录下配置webpack.config.js

const path = require(“path”); //nodejs中的模块作用是拼接路径
//webpack中的所有配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件 entry：入口文件 src下建一个index.ts 值为这个路径
entry: “./src/index.ts”,

// 指定打包文件所在目录
output: {
//指定打包文件的目录
path: path.resolve(__dirname, “dist”),//通过path把路径拼出来
filename: “bundle.js”, //打包后的文件名
}
// 配置webpack的loader 打包时要使用的模块
module: {
rules: [ //指定要加载的规则
{
test: /.ts$/, //test指定的是规则生效的文件
use: {
loader: “ts-loader”,//用ts-loader去处理以ts结尾的文件
},
exclude: /node_modules/,//要排除的文件 默认的不用改
},
],
}
4.指定ts文件编译规范 根目录tsconfig.json中更改compilerOptions 加严格模式 “strict”:false 去掉exclude
5.下来 打包 npm init —yes 在package.json中scripts中加 “build”:“webpack” 通过build命令直接执行webpack

通过npm run build执行webpack 用webpack对项目进行打包 src打包到dist目录下就成功了

6.webpack中常用的插件

1.html-webpack-plugin—html插件能帮助我们在打包时自动地生成html文件，可以很容易的帮我们在里面引入所有的js文件
所以还得安装一个webpack插件cnpm i -D html-webpack-plugin，才能生成html文件
在上面的基础上进行配置该插件

在webpack.config.js中引入插件
// 引入一个包
const path = require(‘path’);
// 引入html插件
const HTMLWebpackPlugin = require(‘html-webpack-plugin’);

配置webpack插件 生效 在里面也可以改生成的html的title
可以按照我们的需求 去设置一个html模板 再生成的html网页根据我们的模板生成
//配置Webpack 插件
plugins: [
new HTMLWebpackPlugin({
// title: “这是一个自定义的title”、
template: “./src/index.html”//根据这个html从而生成对应样式的html
}),
],

npm run build 将html文件会放在dist下

2.cnpm i -D webpack-dev-server开发服务器 安装了一个内置服务器 可以根据项目的改变自动刷新,执行之后在项目改变后就不用手动编译 会自动变化
在package.json中加上start命令 在scripts中”start”:”webpack serve —open”启动webpack服务器并且用chrome打开网页
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“dev”: “webpack —mode development”,
“build”: “webpack —mode production”,
“start”: “webpack serve —open”
},
// 配置服务器 端口
devServer: {
port: 8088,
static:’./public’,
},
// 开发模式使用，方便查错误
devtool: “inline-source-map”,
mode: “development”,

npm start 直接自动打开网页并且实时更新

3.clean-webpack-plugin—clean插件:
cnpm i -D clean-webpack-plugin 作用 在每一次编译前把之前的目录清空 保证编译都是最新文件 避免旧文件的遗留
在webpack.config.js中引入插件
//引入clean插件
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)

在plugin数组中注册
//配置Webpack 插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: “这是一个自定义的title”、
template: “./src/index.html”
}),
],

4.让webpack知道哪些文件可以作为模块被引入 webpack.config.js
resolve:{//用来设置引用模块
//扩展名
extensions 以ts和js结尾文件 都可以作为模块使用
resolve: {
extensions: [‘.ts’, ‘.js’]
}

5.bable 将新语法转为旧语法 浏览器兼容问题 结合webpack去使用
安装依赖：cnpm i -D @babel/core @babel/preset-env babel-loader core-js（四个）

@babel/core—babel核心的工具
@babel/preset-env—babel的预设环境 兼容不同的浏览器环境
babel-loader—babel与webpack结合的工具
core-js—模拟js运行环境（使用时可以按需引入）老版本浏览器兼容新浏览器
顺序 ts-loader将ts代码转为js代码 用babel再将js新版本代码转为js旧版本代码 从下往上执行
use: [
// 配置babel
{
//指定加载器
loader: “babel-loader”,
// 设置babel
options: {
//设置预定义的环境
presets: [
[
//指定环境的插件
“@babel/preset-env”,
// 配置信息
{
// 要兼容的目标浏览器及版本
targets: {
“chrome”: “58”,
“ie”: “11”
},
//指定corejs的版本（根据package.json中的版本，只写整数）
“corejs”: “3”,
//使用corejs的方式 “usage” 表示按需加载 处理promise等等语句
“useBuiltIns”: “usage”
}

                            ]<br />                            ]<br />                        }<br />                    },<br />                <br />                    'ts-loader'<br />                ],<br />webpack执行

6.告诉webpack不使用箭头函数中 environment
output: {
//指定打包文件的目录
path: path.resolve(__dirname, “dist”), //通过path把路径拼出来
filename: “bundle.js”, //打包后的文件名
environment: {
arrowFunction: false, // 关闭webpack的箭头函数，可选 告诉webpack不使用箭头函数
},
},

node+babel+ts配置

安装node之后就自动的安装好npm
npm list -g —depth 0 查看已经安装的包
安装淘宝镜像，安装之后 npm命令变成cnpm
npm install -g cnpm —registry=https://registry.npm.taobao.org

下载工具： cnpm install jquery -g （其中-g指的是全局）

查看当前 npm全局安装路径位置的命令是：npm config get prefix

删除安装包 npm uninstall -g <包名>
使用 npm 卸载插件 ， 语法格式为： npm uninstall [-g][—save-dev]
3.1 不要直接本地删除插件包

3.2 删除全部插件，语法为： npm uninstall gulp-less gulp-gulify gulp-concat …
3.3 借助rimraf一次性删除： npm install rimraf -g ，用法 rimraf node_modules

4、使用 npm 更新插件，语法为： npm update [-g] [—save-dev]
4.1 更新全部插件：```npm update [—save-dev]

5、查看 npm 帮助， 语法为： npm help

6、查看已装插件，语法为： npm list

更新程序包 cnpm outdated -g —depth=0 如果返回的前后包的版本不一致 说明需要更新则 npm install -g <包名>

当一个项目的基本文件目录结构创建，按照现在前端开发工程师的一个习惯，都会在项目根目录下创建一个 package.json 文件，触发该文件创建的命令是：npm init

根据提示进行配置，每步完成按回车键确认。通常第一个出现的配置项是name，表示当前项目的名称，名称的设置有以下五个要求：

（1）英文字符必须是全部小写的

（2）名称间不能出现空格（如：test webpack）

（3）名称不得过长

（4）不能为中文

（5）可以使用连接线（-）和下划线（_）否则都会错误并要求重新输入。

这里再说说其它填写项的作用：

version
—— 表示配置文件的版本号。可跳过

description
—— 配置文件描述文本。可跳过可手动输入

entry point
—— 入口JS文件。可跳过可手动输入

test command
—— 快捷命令设置。可跳过

dependencies
—— 依赖。可跳过，后续自动生成

keywords
—— 关键字设置。可跳过

git repository
—— git仓库。可跳过

author
—— 作者名称

license: (ISC)
—— 许可证，可跳过

实际上，如果你不喜欢这样繁琐的问答生成方式可以使用更快速的生成方式：

npm init —yes

使用这条命令的前提是你当前项目的命名满足规范，也就是上面提到name的那五个要求。（其实哪怕平时我们不使用npm构建项目的时候，也应该有这样良好的项目命名习惯，文件命名也是提升我们项目可扩展性的一个重要要求。）

背景：
由于文件及文件夹过多过碎，拷贝给别人时传输速度较慢，此时就需要把项目打包好之后再发给别人
一般情况下，打包命令为：npm run build
但比如我们公司就是: npm run zz(zz是项目名称)
（cnpm i 包名 —save 添加’–save‘ 是为了把包存入webpack中）
但有时候公司的项目可能不存在build命令，这时就要查看package.json文件，查找当前项目的打包命令;
一般情况下打包后的文件名是: dist，如果需要发给别人一定要压缩一下再发

二、package.json的作用
package.json是一个项目描述文件, 里面记录了当前项目的信息。eg: 项目名称、版本、作者、gitHub地址、当前项目依赖哪些第三方模块等。 使用npm安装第三方模块，是模块的相关信息会自动添加到package.json文件中

package.json
package.json文件，它定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、作者、license等信息）。

tsconfig.json
tsconfig.json 文件，它指定了用来编译这个项目的根文件和编译选项。

不带任何输入文件的情况下调用 tsc 命令，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。
当命令行上指定了输入文件时，tsconfig.json 文件会被忽略。

node_modules
node_modules 文件夹是项目的所有依赖包，package-lock.json 文件将项目依赖包的版本锁定，避免依赖包大版本升级造成不兼容问题。

babel项目转换 es6->es5 jsx->js
第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具， 项目中使用的是webpack）；
第二步：初始化项目
npm init -y
第三步：安装
npm i babel-cli babel-preset-env browserify
第四步：使用babel转换
npx babel js（js目录） -d dist/js（转化后的js目录） —presets=babel-preset-env
第五步：打包
npx browserify dist/js/app.js -o dist/bundle.js
第六步：在使用时引入bundle.js

typescript:
// 1.typeScript开发环境搭建
// 2.使用npm全局安装typescript
// 进入命令行
// 输入：npm i -g typescript
// 3.创建一个ts文件
// 4.使用tsc对ts文件进行编译
// 进入命令行
// 进入ts文件所在目录
// 执行命令：tsc xxx.ts
node xxx.js
tsc ts文件 -w 能够对单个ts文件进行监视，若有修改则会自动重新编译。
新建一个tsconfig.json文件，
然后在命令行执行tsc -w 可以对所有ts文件进行监视，
若有修改则会自动重新编译。
自动生成tsconfig.json文件 tsc —init
编译环境 npm install ts-node -g 就可以直接在vscode编译
打开json文件，取消outDir的注释，指的是编译到的路径，新建一个文件夹js存放编译后的js

实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以 合构建工具一起使用，今天我们以webpack为例 绍一下如何结合构建工具使用TS。