尽管这个假设可能部分正确，但是其中某些功能可能对一些开发人员来说仍然是个谜。

ES6 附带的功能之一是添加了let和const，可用于变量声明。问题是，它们与var有何不同？ 如果你仍然不清楚-那么读完本文你就知道了 😂。

在本文中，我们将讨论var，let和const的作用域、用途和变量提升。当你阅读时，请注意我将指出的它们之间的差异。

Var

在 ES6 出现之前，必须使用 var 声明。但是，前端开发出现的一些问题与使用 var 声明的变量有关。这就是为什么必须要有新的方法来声明变量。首先，让我们在讨论这些问题之前更多地了解 var。

var 的作用域

作用域本质上是指变量/函数可供访问的范围。var可以在全局范围声明或函数/局部范围内声明。

当在最外层函数的外部声明var变量时，作用域是全局的。这意味着在最外层函数的外部用var声明的任何变量都可以在windows中使用。

当在函数中声明var时，作用域是局部的。这意味着它只能在函数内访问。

要进一步了解，请查看下面的示例。

var greeter = 'hey hi';

function newFunction() {
    var hello = 'hello';
}

这里，greeter是全局范围的，因为它存在于函数外部，而hello是函数范围的。因此，我们无法在函数外部访问变量hello。因此，如果我们这样做：

var tester = 'hey hi';
function newFunction() {
    var hello = 'hello';
}
console.log(hello); // error: hello is not defined

我们会收到错误消息，这是由于函数外部没有hello导致的。

var 变量可以重新声明和修改

这意味着我们可以在相同的作用域内执行下面的操作，并且不会出错

var greeter = 'hey hi';
var greeter = 'say Hello instead';

又比如

var greeter = 'hey hi';
greeter = 'say Hello instead';

var 的变量提升

变量提升是 JavaScript 的一种机制:在执行代码之前，变量和函数声明会移至其作用域的顶部。这意味着如果我们这样做:

console.log(greeter);
var greeter = 'say hello';

生面的代码会被解释为:

var greeter;
console.log(greeter); // greeter is undefined
greeter = 'say hello';

因此，将var声明的变量会被提升到其作用域的顶部，并使用 undefined 值对其进行初始化.

var 的问题

var有一个弱点。我将使用以下示例进行说明：

    var greeter = "hey hi";
    var times = 4;
if (times > 3) {
    var greeter = "say Hello instead";
}

console.log(greeter) // "say Hello instead"

由于times> 3返回 true，因此将greeter重新定义为saysay Hello。如果你有是故意重新定义greeter，这段代码是问题的，但是当你不知道之前已经定义了变量greeter时，这将成为产生问题。

如果在代码的其他部分使用了greeter，这可能会导致代码中出现许多错误。这就是为什么需要let和const的原因。

Let

let现在已经成为变量声明的首选。这并不奇怪，因为它是对var声明的改进。它也解决了我们刚刚介绍的var问题。让我们考虑一下为什么会这样。

let 是块级作用域

块是由 {} 界定的代码块，大括号中有一个块。大括号内的任何内容都包含在一个块级作用域中.

因此，在带有let的块中声明的变量仅可在该块中使用。让我用一个例子解释一下

let greeting = 'say Hi';
let times = 4;

if (times > 3) {
    let hello = 'say Hello instead';
    console.log(hello); // "say Hello instead"
}
console.log(hello); // hello is not defined

我们看到在其代码块（定义它的花括号）之外使用hello会返回错误。这是因为let变量是块范围的.

let 可以被修改但是不能被重新声明.

就像var一样，用let声明的变量可以在其范围内被修改。但与var不同的是，let变量无法在其作用域内被重新声明。 来看下面的栗子:

let greeting = 'say Hi';
greeting = 'say Hello instead';

上面的代码将会返回一个错误:

let greeting = 'say Hi';
let greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared

但是，如果在不同的作用域中定义了相同的变量，则不会有错误：

let greeting = 'say Hi';
if (true) {
    let greeting = 'say Hello instead';
    console.log(greeting); // "say Hello instead"
}
console.log(greeting); // "say Hi"

为什么没有错误？ 这是因为两个实例的作用域不同，因此它们会被视为不同的变量。

这个事实说明:使用let,是比var更好的选择。当使用let时，你不必费心思考 🤔 变量的名称，因为变量仅在其块级作用域内存在。

同样，由于在一个块级作用域内不能多次声明一个变量，因此不会发生前面讨论的var出现的问题。

let 的变量提升

就像var一样，let声明也被提升到作用域顶部。
但不同的是:

• 用var声明的变量会被提升到其作用域的顶部，并使用 undefined 值对其进行初始化。
• 用let声明的变量会被提升到其作用域的顶部，不会对值进行初始化。

因此，如果你尝试在声明前使用let变量，则会收到Reference Error。

Const

用const声明的变量保持常量值。 const声明与let声明有一些相似之处

const 声明的变量在块级作用域内

像let声明一样，const声明只能在声明它们的块级作用域中访问

const 不能被修改并且不能被重新声明

这意味着用const声明的变量的值保持不变。不能修改或重新声明。因此，如果我们使用const声明变量，那么我们将无法做到这一点:

const greeting = 'say Hi';
greeting = 'say Hello instead'; // error: Assignment to constant variable.

或者这个这样:

const greeting = 'say Hi';
const greeting = 'say Hello instead'; // error: Identifier 'greeting' has already been declared

因此，每个const声明都必须在声明时进行初始化。

当用const声明对象时，这种行为却有所不同。虽然不能更新const对象，但是可以更新该对象的属性。 因此，如果我们声明一个const对象为

const greeting = {
    message: 'say Hi',
    times: 4,
};

同样不能像下面这样做:

const greeting = {
    words: 'Hello',
    number: 'five',
}; // error:  Assignment to constant variable.

但我们可以这样做:

greeting.message = 'say Hello instead';

这将更新greeting.message的值，而不会返回错误。

const 的变量提升

就像let一样，const声明也被提升到顶部，但是没有初始化。

最后，我们总结一下它们的异同：

• var声明是全局作用域或函数作用域，而let和const是块作用域。
• var变量可以在其范围内更新和重新声明； let变量可以被更新但不能重新声明； const变量既不能更新也不能重新声明。
• 它们都被提升到其作用域的顶端。但是，虽然使用变量undefined初始化了var变量，但未初始化let和const变量。
• 尽管可以在不初始化的情况下声明var和let，但是在声明期间必须初始化const。

有任何疑问或补充吗？请告诉我。

谢谢你的阅读:)

原文：Var, Let, and Const – What's the Difference?，作者：Sarah Chima Atuonwu

在本文中，我将向你展示在 JavaScript 中使用对象数组的基础知识。

如果你曾经使用过 JSON 结构，那么你就已经使用过 JavaScript 对象。从字面意思看，JSON 代表 JavaScript Object Notation。

创建一个对象很简单:

{
  "color": "purple",
  "type": "minivan",
  // 注册日期
  "registration": new Date('2012-02-03'),
  //载人数
  "capacity": 7
}

该对象代表一辆汽车。汽车可以有多种类型和颜色，并且每个对象代表一辆特定的汽车。

大多数时候你都是从外部服务获取此类数据，但是有时你需要手动创建对象及其数组，就像我创建这个电子商店时一样：

每个类别列表项在 HTML 中看起来像这样:

但我不想将此代码重复 12 次，因为这很难维护。

创建对象数组

让我们回到汽车的话题上来。我们来看看这些车：

我们用数组表示它们:

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

对象数组并非始终保持不变，我们总是需要操作它们。因此，让我们看一下如何将新对象添加到已经存在的数组中。

在头部添加一个新对象 - Array.unshift

在头部添加一个对象, 使用 Array.unshift。

let car = {
    color: 'red',
    type: 'cabrio',
    registration: new Date('2016-05-02'),
    capacity: 2,
};
cars.unshift(car);

在尾部添加一个新对象 - Array.push

添加一个对象到尾部的位置，使用 Array.push。

let car = {
    color: 'red',
    type: 'cabrio',
    registration: new Date('2016-05-02'),
    capacity: 2,
};
cars.push(car);

添加一个新对象到中间位置 - Array.splice

添加一个对象到中间位置，使用 Array.splice。此方法非常方便，因为它也可以删除数组的某一个元素。注意其参数:

Array.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);

因此，如果我们要在第五个位置添加红色敞篷车，可以像下面这样写：

let car = {
    color: 'red',
    type: 'cabrio',
    registration: new Date('2016-05-02'),
    capacity: 2,
};
cars.splice(4, 0, car);

对象数组的遍历

JavaScript 提供了许多函数/方法，可以解决你的某些问题，从而无需你手动实现其内部逻辑。我们来看看吧。

通过其值在数组中查找特定的对象 - Array.find

如果想在车辆数组中找到一辆红色的，我们可以使用 Array.find。

let car = cars.find((car) => car.color === 'red');

这个函数返回匹配到的第一个元素：

console.log(car);
// output:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

也可以搜索多个值：

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

在这种情况下，我们将获得车辆列表中的最后一辆车。

从数组中获取符合条件的多个元素 - Array.filter

Array.find 方法只返回一个对象。如果你想获取所有红色的车，你需要使用 Array.filter。

let redCars = cars.filter((car) => car.color === 'red');
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

转换数组的对象 - Array.map

在数组的所有方法中，Array.map方法可以说是我们使用最频繁的了。将对象数组转换为不同对象的数组，这就是 Array.map 的工作。假设我们要根据汽车的大小将其分为三类：

let sizes = cars.map((car) => {
    if (car.capacity <= 3) {
        return 'small';
    }
    if (car.capacity <= 5) {
        return 'medium';
    }
    return 'large';
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

如果我们需要更多的值，也可以创建一个新的对象：

let carsProperties = cars.map((car) => {
    let properties = {
        capacity: car.capacity,
        size: 'large',
    };
    if (car.capacity <= 5) {
        properties['size'] = 'medium';
    }
    if (car.capacity <= 3) {
        properties['size'] = 'small';
    }
    return properties;
});
console.log(carsProperties);
// output:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

向数组的每个对象添加属性 - Array.forEach

Array.map会生成新的数组。那如果我们只想对原来的汽车对象做修改怎么办？这对Array.forEach函数来说是一个很好的使用场景：

cars.forEach((car) => {
    car['size'] = 'large';
    if (car.capacity <= 5) {
        car['size'] = 'medium';
    }
    if (car.capacity <= 3) {
        car['size'] = 'small';
    }
});

按属性对数组排序 - Array.sort

完成对象转换后，通常需要以某种方式对它们进行排序。

通常，排序是基于每个对象都具有的属性的值。我们可以使用Array.sort函数，但是我们需要提供一个定义排序机制的函数（compareFunction）。

译者注：

如果指明了 compareFunction，那么数组会按照调用该函数的返回值排序，即 a 和 b 是两个将要被比较的元素：

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前。
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）。
• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
• compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

假设我们要根据汽车的载人量对汽车进行降序排序。

let sortedCars = cars.sort((c1, c2) =>
    c1.capacity < c2.capacity ? 1 : c1.capacity > c2.capacity ? -1 : 0
);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

如果排序函数的结果为正，则Array.sort比较两个对象，并将第一个对象放在第二位。因此，你可以将排序函数视为一个问题：是否将第一个对象放置在第二个位置。

确保两个对象的比较值相同时始终将大小比较写为零，以避免不必要的交换。

检查数组中的对象是否满足条件 - Array.every，Array.includes

当我们只需要检查每个对象的特定条件时，可使用Array.every和Array.some。

汽车清单上有红色敞篷车吗？所有的汽车都能载至少 4 人吗？......

cars.some((car) => car.color === 'red' && car.type === 'cabrio');
// output: true

cars.every(car => car.capacity >= 4);
// output: false

你可能还记得函数Array.includes与Array.some类似，但只有元素是原始类型的时候，二者才类似。

总结

在本文中，我们介绍了一些基本函数/方法，这些方法可帮助你创建、操作、转换和遍历对象数组，它们应该涵盖了你遇到的大多数数据处理场景。

如果你遇到更复杂的数组使用场景，请查看 freeCodeCamp 的这篇数组详细指南或参考 W3Schools 的这篇资料。

或者与我联系（Twitter@ondrabus），我可以准备另外一篇文章：-)

原文：JavaScript Array of Objects Tutorial – How to Create, Update, and Loop Through Objects Using JS Array Methods，作者：Ondrej Polesny

你可以把本文看做一个带有示例的 TypeScript 高级类型备忘单

让我们开始吧！

• Intersection Types(交叉类型)
• Union Types(联合类型)
• Generic Types(泛型)
  • 泛型函数
  • 泛型接口
  • 多参数的泛型类型
• Utility Types
  • Partial
  • Required
  • Readonly
  • Pick
  • Omit
  • Extract
  • Exclude
  • Record
  • NonNullable
• Mapped Types( 映射类型)
• Type Guards(类型保护)
  • typeof
  • instanceof
  • in
• Conditional Types(条件类型)

Intersection Types(交叉类型)

交叉类型是一种将多种类型组合为一种类型的方法。 这意味着你可以将给定的类型 A 与类型 B 或更多类型合并，并获得具有所有属性的单个类型。

type LeftType = {
    id: number;
    left: string;
};

type RightType = {
    id: number;
    right: string;
};

type IntersectionType = LeftType & RightType;

function showType(args: IntersectionType) {
    console.log(args);
}

showType({ id: 1, left: 'test', right: 'test' });
// Output: {id: 1, left: "test", right: "test"}

如你所见，IntersectionType组合了两种类型-LeftType和RightType，并使用＆符号形成了交叉类型。

Union Types(联合类型)

联合类型使你可以赋予同一个变量不同的类型

type UnionType = string | number;

function showType(arg: UnionType) {
    console.log(arg);
}

showType('test');
// Output: test

showType(7);
// Output: 7

函数showType是一个联合类型函数，它接受字符串或者数字作为参数。

Generic Types(泛型)

泛型类型是复用给定类型的一部分的一种方式。 它有助于捕获作为参数传递的类型 T。

优点: 创建可重用的函数，一个函数可以支持多种类型的数据。 这样开发者就可以根据自己的数据类型来使用函数

泛型函数

function showType<T>(args: T) {
    console.log(args);
}

showType('test');
// Output: "test"

showType(1);
// Output: 1

如何创建泛型类型:需要使用<>并将 T(名称可自定义)作为参数传递。
上面的 🌰 栗子中，
我们给 showType 添加了类型变量 T。T帮助我们捕获用户传入的参数的类型(比如：number/string)之后我们就可以使用这个类型

我们把 showType 函数叫做泛型函数，因为它可以适用于多个类型

泛型接口

interface GenericType<T> {
    id: number;
    name: T;
}

function showType(args: GenericType<string>) {
    console.log(args);
}

showType({ id: 1, name: 'test' });
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<number>) {
    console.log(args);
}

showTypeTwo({ id: 1, name: 4 });
// Output: {id: 1, name: 4}

在上面的栗子中，声明了一个 GenericType 接口，该接口接收泛型类型 T, 并通过类型 T来约束接口内 name 的类型

注:泛型变量约束了整个接口后，在实现的时候，必须指定一个类型

因此在使用时我们可以将name设置为任意类型的值，示例中为字符串或数字

多参数的泛型类型

interface GenericType<T, U> {
    id: T;
    name: U;
}

function showType(args: GenericType<number, string>) {
    console.log(args);
}

showType({ id: 1, name: 'test' });
// Output: {id: 1, name: "test"}

function showTypeTwo(args: GenericType<string, string[]>) {
    console.log(args);
}

showTypeTwo({ id: '001', name: ['This', 'is', 'a', 'Test'] });
// Output: {id: "001", name: Array["This", "is", "a", "Test"]}

泛型类型可以接收多个参数。 在上面的代码中，我们传入两个参数：T和U，然后将它们用作id,name的类型。 也就是说，我们现在可以使用该接口并提供不同的类型作为参数。

Utility Types

TypeScript 内部也提供了很多方便实用的工具，可帮助我们更轻松地操作类型。 如果要使用它们，你需要将类型传递给<>

Partial

• Partial<T>

Partial 允许你将T类型的所有属性设为可选。 它将在每一个字段后面添加一个?。

interface PartialType {
    id: number;
    firstName: string;
    lastName: string;
}

/*
等效于
interface PartialType {
  id?: number
  firstName?: string
  lastName?: string
}
*/

function showType(args: Partial<PartialType>) {
    console.log(args);
}

showType({ id: 1 });
// Output: {id: 1}

showType({ firstName: 'John', lastName: 'Doe' });
// Output: {firstName: "John", lastName: "Doe"}

上面代码中声明了一个PartialType接口，它用作函数showType()的参数的类型。 为了使所有字段都变为可选，我们使用Partial关键字并将PartialType类型作为参数传递。

Required

• Required<T>

将某个类型里的属性全部变为必选项

interface RequiredType {
    id: number;
    firstName?: string;
    lastName?: string;
}

function showType(args: Required<RequiredType>) {
    console.log(args);
}

showType({ id: 1, firstName: 'John', lastName: 'Doe' });
// Output: { id: 1, firstName: "John", lastName: "Doe" }

showType({ id: 1 });
// Error: Type '{ id: number: }' is missing the following properties from type 'Required<RequiredType>': firstName, lastName

上面的代码中，即使我们在使用接口之前先将某些属性设为可选，但Required被加入后也会使所有属性成为必选。 如果省略某些必选参数，TypeScript 将报错。

Readonly

• Readonly<T>

会转换类型的所有属性，以使它们无法被修改

interface ReadonlyType {
    id: number;
    name: string;
}

function showType(args: Readonly<ReadonlyType>) {
    args.id = 4;
    console.log(args);
}

showType({ id: 1, name: 'Doe' });
// Error: Cannot assign to 'id' because it is a read-only property.

我们使用Readonly来使ReadonlyType的属性不可被修改。 也就是说，如果你尝试为这些字段之一赋予新值，则会引发错误。

除此之外，你还可以在指定的属性前面使用关键字readonly使其无法被重新赋值

interface ReadonlyType {
    readonly id: number;
    name: string;
}

Pick

• Pick<T, K>

此方法允许你从一个已存在的类型 T中选择一些属性作为K, 从而创建一个新类型

即 抽取一个类型/接口中的一些子集作为一个新的类型

T代表要抽取的对象
K有一个约束: 一定是来自T所有属性字面量的联合类型
新的类型/属性一定要从K中选取，

/**
    源码实现
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

interface PickType {
    id: number;
    firstName: string;
    lastName: string;
}

function showType(args: Pick<PickType, 'firstName' | 'lastName'>) {
    console.log(args);
}

showType({ firstName: 'John', lastName: 'Doe' });
// Output: {firstName: "John"}

showType({ id: 3 });
// Error: Object literal may only specify known properties, and 'id' does not exist in type 'Pick<PickType, "firstName" | "lastName">'

Pick 与我们前面讨论的工具有一些不同，它需要两个参数

• T是要从中选择元素的类型
• K是要选择的属性(可以使使用联合类型来选择多个字段)

Omit

• Omit<T, K>

Omit的作用与Pick类型正好相反。 不是选择元素，而是从类型T中删除K个属性。

interface PickType {
    id: number;
    firstName: string;
    lastName: string;
}

function showType(args: Omit<PickType, 'firstName' | 'lastName'>) {
    console.log(args);
}

showType({ id: 7 });
// Output: {id: 7}

showType({ firstName: 'John' });
// Error: Object literal may only specify known properties, and 'firstName' does not exist in type 'Pick<PickType, "id">'

Extract

• Extract<T, U>

提取T中可以赋值给U的类型--取交集

Extract允许你通过选择两种不同类型中的共有属性来构造新的类型。 也就是从T中提取所有可分配给U的属性。

interface FirstType {
    id: number;
    firstName: string;
    lastName: string;
}

interface SecondType {
    id: number;
    address: string;
    city: string;
}

type ExtractType = Extract<keyof FirstType, keyof SecondType>;
// Output: "id"

在上面的代码中，FirstType接口和SecondType接口，都存在 id:number属性。 因此，通过使用Extract，即提取出了新的类型 {id:number}。

Exclude

Exclude<T, U> --从 T 中剔除可以赋值给 U 的类型。

与Extract不同，Exclude通过排除两个不同类型中已经存在的共有属性来构造新的类型。 它会从T中排除所有可分配给U的字段。

interface FirstType {
    id: number;
    firstName: string;
    lastName: string;
}

interface SecondType {
    id: number;
    address: string;
    city: string;
}

type ExcludeType = Exclude<keyof FirstType, keyof SecondType>;

// Output; "firstName" | "lastName"

上面的代码可以看到，属性firstName和lastName 在SecondType类型中不存在。 通过使用Extract关键字，我们可以获得T中存在而U中不存在的字段。

Record

• Record<K,T>

此工具可帮助你构造具有给定类型T的一组属性K的类型。将一个类型的属性映射到另一个类型的属性时，Record非常方便。

interface EmployeeType {
    id: number;
    fullname: string;
    role: string;
}

let employees: Record<number, EmployeeType> = {
    0: { id: 1, fullname: 'John Doe', role: 'Designer' },
    1: { id: 2, fullname: 'Ibrahima Fall', role: 'Developer' },
    2: { id: 3, fullname: 'Sara Duckson', role: 'Developer' },
};

// 0: { id: 1, fullname: "John Doe", role: "Designer" },
// 1: { id: 2, fullname: "Ibrahima Fall", role: "Developer" },
// 2: { id: 3, fullname: "Sara Duckson", role: "Developer" }

Record的工作方式相对简单。 在代码中，它期望一个number作为类型，这就是为什么我们将 0、1 和 2 作为employees变量的键的原因。 如果你尝试使用字符串作为属性，则会引发错误,因为属性是由EmployeeType给出的具有 ID，fullName 和 role 字段的对象。

NonNullable

• NonNullable<T>

-- 从 T 中剔除 null 和 undefined

type NonNullableType = string | number | null | undefined;

function showType(args: NonNullable<NonNullableType>) {
    console.log(args);
}

showType('test');
// Output: "test"

showType(1);
// Output: 1

showType(null);
// Error: Argument of type 'null' is not assignable to parameter of type 'string | number'.

showType(undefined);
// Error: Argument of type 'undefined' is not assignable to parameter of type 'string | number'.

我们将类型NonNullableType作为参数传递给NonNullable，NonNullable通过排除null和undefined来构造新类型。 也就是说，如果你传递可为空的值，TypeScript 将引发错误。

顺便说一句，如果将--strictNullChecks标志添加到tsconfig文件，TypeScript 将应用非空性规则。

Mapped Types( 映射类型)

映射类型允许你从一个旧的类型，生成一个新的类型。

请注意，前面介绍的某些高级类型也是映射类型。
如:

/*
Readonly， Partial和 Pick是同态的，但 Record不是。 因为 Record并不需要输入类型来拷贝属性，所以它不属于同态：
*/
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
type Partial<T> = {
    [P in keyof T]?: T[P];
};
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

Record;

type StringMap<T> = {
    [P in keyof T]: string;
};

function showType(arg: StringMap<{ id: number; name: string }>) {
    console.log(arg);
}

showType({ id: 1, name: 'Test' });
// Error: Type 'number' is not assignable to type 'string'.

showType({ id: 'testId', name: 'This is a Test' });
// Output: {id: "testId", name: "This is a Test"}

StringMap<>会将传入的任何类型转换为字符串。 就是说，如果我们在函数showType()中使用它，则接收到的参数必须是字符串-否则，TypeScript 将引发错误。

Type Guards(类型保护)

类型保护使你可以使用运算符检查变量或对象的类型。 这是一个条件块，它使用typeof，instanceof或in返回类型。

typescript 能够在特定区块中保证变量属于某种确定类型。可以在此区块中放心地引用此类型的属性，或者调用此类型的方法

typeof

function showType(x: number | string) {
    if (typeof x === 'number') {
        return `The result is ${x + x}`;
    }
    throw new Error(`This operation can't be done on a ${typeof x}`);
}

showType("I'm not a number");
// Error: This operation can't be done on a string

showType(7);
// Output: The result is 14

什么代码中，有一个普通的 JavaScript 条件块，通过typeof检查接收到的参数的类型。

instanceof

class Foo {
    bar() {
        return 'Hello World';
    }
}

class Bar {
    baz = '123';
}

function showType(arg: Foo | Bar) {
    if (arg instanceof Foo) {
        console.log(arg.bar());
        return arg.bar();
    }

    throw new Error('The type is not supported');
}

showType(new Foo());
// Output: Hello World

showType(new Bar());
// Error: The type is not supported

像前面的示例一样，这也是一个类型保护，它检查接收到的参数是否是Foo类的一部分，并对其进行处理。

in

interface FirstType {
    x: number;
}
interface SecondType {
    y: string;
}

function showType(arg: FirstType | SecondType) {
    if ('x' in arg) {
        console.log(`The property ${arg.x} exists`);
        return `The property ${arg.x} exists`;
    }
    throw new Error('This type is not expected');
}

showType({ x: 7 });
// Output: The property 7 exists

showType({ y: 'ccc' });
// Error: This type is not expected

什么的栗子中，使用in检查参数对象上是否存在属性x。

Conditional Types(条件类型)

条件类型测试两种类型，然后根据该测试的结果选择其中一种。

一种由条件表达式所决定的类型， 表现形式为 T extends U ? X : Y , 即如果类型T可以被赋值给类型U，那么结果类型就是X类型，否则为Y类型。

条件类型使类型具有了不唯一性，增加了语言的灵活性，

// 源码实现
type NonNullable<T> = T extends null | undefined ? never : T;

// NotNull<T> 等价于 NoneNullable<T,U>

// 用法示例
type resType = NonNullable<string | number | null | undefined>; // string|number

上面的代码中， NonNullable检查类型是否为 null，并根据该类型进行处理。 正如你所看到的，它使用了 JavaScript 三元运算符。

感谢阅读。

原文：The React TypeScript Cheatsheet – How To Set Up Types on Hooks，作者：Ibrahima Ndaw

可能有数十种不同的方法可以执行此操作，但内置 reverse 方法除外，因为 JavaScript 的 String 对象上没有此方法。

以下是我解决 JavaScript 反转字符串问题的三种最有趣的方法。

算法要求

反转提供的字符串。
你可能需要将字符串转换为数组，然后才能将其反转。
你的结果必须是字符串。

function reverseString(str) {
    return str;
}
reverseString("hello");

提供测试用例

• reverseString(“hello”)  应该返回 “olleh”
• reverseString(“Howdy”)  应该返回 “ydwoH”
• reverseString(“Greetings from Earth”)  应该返回 ”htraE morf sgniteerG”

1. 使用内置方法反转字符串

对于此解决方案，我们将使用三种方法：String.prototype.split() 方法，Array.prototype.reverse() 方法和 Array.prototype.join() 方法。

• split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置
• reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组
• join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

function reverseString(str) {
    // Step 1. Use the split() method to return a new array
    var splitString = str.split(""); // var splitString = "hello".split("");
    // ["h", "e", "l", "l", "o"]
 
    // Step 2. Use the reverse() method to reverse the new created array
    var reverseArray = splitString.reverse(); // var reverseArray = ["h", "e", "l", "l", "o"].reverse();
    // ["o", "l", "l", "e", "h"]
 
    // Step 3. Use the join() method to join all elements of the array into a string
    var joinArray = reverseArray.join(""); // var joinArray = ["o", "l", "l", "e", "h"].join("");
    // "olleh"
    
    //Step 4. Return the reversed string
    return joinArray; // "olleh"
}
 
reverseString("hello");

三个方法组合形成链式调用:

function reverseString(str) {
    return str.split("").reverse().join("");
}
reverseString("hello");

2. 用递减的 for 循环反转字符串

function reverseString(str) {
    // Step 1. Create an empty string that will host the new created string
    var newString = "";
 
    // Step 2. Create the FOR loop
    /* The starting point of the loop will be (str.length - 1) which corresponds to the 
       last character of the string, "o"
       As long as i is greater than or equals 0, the loop will go on
       We decrement i after each iteration */
    for (var i = str.length - 1; i >= 0; i--) { 
        newString += str[i]; // or newString = newString + str[i];
    }
    /* Here hello's length equals 5
        For each iteration: i = str.length - 1 and newString = newString + str[i]
        First iteration:    i = 5 - 1 = 4,         newString = "" + "o" = "o"
        Second iteration:   i = 4 - 1 = 3,         newString = "o" + "l" = "ol"
        Third iteration:    i = 3 - 1 = 2,         newString = "ol" + "l" = "oll"
        Fourth iteration:   i = 2 - 1 = 1,         newString = "oll" + "e" = "olle"
        Fifth iteration:    i = 1 - 1 = 0,         newString = "olle" + "h" = "olleh"
    End of the FOR Loop*/
 
    // Step 3. Return the reversed string
    return newString; // "olleh"
}
 
reverseString('hello');

删除注释:

function reverseString(str) {
    var newString = "";
    for (var i = str.length - 1; i >= 0; i--) {
        newString += str[i];
    }
    return newString;
}
reverseString('hello');

3. 用递归反转字符串

对于此解决方案，我们将使用两种方法：String.prototype.substr() 方法和 String.prototype.charAt() 方法

• substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符.

译者注：尽管 String.prototype.substr(……) 没有严格被废弃 (as in "removed from the Web standards")，但它被认作是遗留的函数并且可以的话应该避免使用。它并非 JavaScript 核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 substring() 替代它。

'hello'.substr(1); // "ello"

• charAt() 方法从一个字符串中返回指定的字符.

'hello'.charAt(0); // "h"

递归的深度等于 String 的长度。 当 String 很长且堆栈大小是主要问题的时候，代码运行非常慢。所以此方案不是最佳解决方案

function reverseString(str) {
  if (str === "") // 如果传入空字符串，则直接返回它
    return "";
  else
    return reverseString(str.substr(1)) + str.charAt(0);
/*
递归方法的第一部分
你需要记住不会只有一次回调，会存在多次嵌套回调
每次回调的公式: str === "?"                         reverseString(str.subst(1))     + str.charAt(0)
1st call – reverseString("Hello")   will return   reverseString("ello")           + "h"
2nd call – reverseString("ello")    will return   reverseString("llo")            + "e"
3rd call – reverseString("llo")     will return   reverseString("lo")             + "l"
4th call – reverseString("lo")      will return   reverseString("o")              + "l"
5th call – reverseString("o")       will return   reverseString("")               + "o"
递归方法的第二部分
该方法达一旦到if条件，嵌套最深的调用会立即返回

删除注释:

function reverseString(str) {
    if (str === '') return '';
    else return reverseString(str.substr(1)) + str.charAt(0);
}
reverseString('hello');

使用三元表达式:

function reverseString(str) {
    return str === '' ? '' : reverseString(str.substr(1)) + str.charAt(0);
}
reverseString('hello');

JavaScript 字符串反转  是一种小型且简单的算法，在电话技术筛查或技术面试中都可能被问到。 你可以采用最简单的方式解决此问题，也可以采用递归或更复杂的解决方案来解决。

希望本篇文章对你有所帮助。 这是我的“如何解决 FCC 算法”系列文章的一部分，下面几篇文章是其他算法的了一些解决方案。

在 JavaScript 中实现重复字符串的三种方法
在本文中，我将说明如何解决 freeCodeCamp 的“重复字符串”挑战.

在 JavaScript 中判断字符串是否结束的两种方法
在本文中，我将说明如何解决 freeCodeCamp 的“确定结束”挑战.

在 JavaScript 中实现数字阶乘的三种方法
在本文中，我将说明如何解决 freeCodeCamp 的“数字阶乘”挑战”

在 JavaScript 中判断回文字符串的两种方法
在本文中，我将说明如何解决 freeCodeCamp 的“检查回文字符串”挑战”.

在 JavaScript 中查找字符串中最长单词的三种方法
在本文中，我将说明如何解决 freeCodeCamp 的“检查字符串中的最长单词”挑战”.

用 JavaScript 对句子加标题的三种方法
在本文中，我将说明如何解决 freeCodeCamp 的“字符串中每个单词首字母转为大写”挑战”.

如果你有自己的解决方案或任何建议，欢迎在评论中留言.

或者，你也可以在 Medium，Twitter，GitHub 和 LinkedIn 上关注我；-)

＃保持好奇，＃持续前进和＃实现目标！

资源

• split() method — MDN
• reverse() method — MDN
• join() method — MDN
• String.length — MDN
• substr() method — MDN
• charAt() method — MDN

原文：Three Ways to Reverse a String in JavaScript，作者：Sonya Moisset

本篇文章可以作为 npm（Node.js 最喜欢的伙伴）的一个基本学习指南。

自 2009 年以来，Node.js 一直席卷全球。成千上万个系统基于 Node.js 构建，促使开发者在社区宣称“JavaScript 正在吞噬软件”。

Node 成功的主要因素之一是它广受欢迎的软件包管理器——npm，因为 npm 使 JavaScript 开发人员可以快速方便地共享软件包， 例如 lodash  和 moment。

在我撰写这篇文章时，npm 已帮助发布了 130 万个软件包，每周下载量超过 160 亿次！ 这些数字对于任何软件工具来说都非常厉害。 所以，现在让我们讨论一下 npm 到底是什么。

NPM 是什么

npm（“Node 包管理器”）是 JavaScript 运行时 Node.js 的默认程序包管理器。

它也被称为“Ninja Pumpkin Mutants”，“Nonprofit Pizza Makers”，以及许多其他随机名称，你可以在  npm-expansions  上探索这些名称。

npm 由两个主要部分组成:

• 用于发布和下载程序包的 CLI（命令行界面）工具
• 托管 JavaScript 程序包的  在线存储库

为了更直观地解释，我们可以将存储库  npmjs.com  视为一个物流集散中心，该中心从卖方（npm 包裹的作者）那里接收货物的包裹，并将这些货物分发给买方（npm 包裹的用户）。

为了促进此过程，npmjs.com  物流集散中心雇用了一群勤劳的袋熊（npm CLI），他们将被分配给每个  npmjs.com  用户作为私人助理。 因此，dependencies（依赖项）会如下传递给 JavaScript 开发人员：

发布 JS 软件包的过程如下：

让我们看看这只袋熊如何协助想要在项目中使用 JavaScript 包的开发人员。下面我们还将看到它们（npm CLI）如何帮助开源向导将其出色的库推向世界。

package.json

每个 JavaScript 项目（无论是 Node.js 还是浏览器应用程序）都可以被当作 npm 软件包，并且通过  package.json  来描述项目和软件包信息。

我们可以将  package.json  视为快递盒子上的运输信息。

当运行  npm init  初始化 JavaScript/Node.js 项目时，将生成  package.json  文件，文件内的内容(基本元数据)由开发人员提供：

• name：JavaScript 项目或库的名称。
• version：项目的版本。通常，在应用程序开发中，由于没有必要对开源库进行版本控制，因此经常忽略这一块。但是，仍可以用它来定义版本。
• description：项目的描述。
• license：项目的许可证。

npm scripts

package.json  还支持一个  scripts  属性，可以把它当作在项目本地运行的命令行工具。例如，一个 npm 项目的  scripts部分可能看起来像这样：

{
  "scripts": {
    "build": "tsc",
    "format": "prettier --write **/*.ts",
    "format-check": "prettier --check **/*.ts",
    "lint": "eslint src/**/*.ts",
    "pack": "ncc build",
    "test": "jest",
    "all": "npm run build && npm run format && npm run lint && npm run pack && npm test"
  }
}

eslint，prettier，ncc，jest  不是安装为全局可执行文件，而是安装在项目本地的 node_modules/.bin/ 中。

最新引入的  npx  使我们可以像在全局安装程序一样运行这些  node_modules  项目作用域命令，方法是在其前面加上  npx ...（即npx prettier --write ** / *。ts）。

dependencies vs devDependencies

这两个以键值对象的形式出现，其中 npm 库的名称为键，其语义格式版本为值。 大家可以看看 Github 的 TypeScript 操作模板中的示例：

{
  "dependencies": {
    "@actions/core": "^1.2.3",
    "@actions/github": "^2.1.1"
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.0",
    "@typescript-eslint/parser": "^2.22.0",
    "@zeit/ncc": "^0.21.1",
    "eslint": "^6.8.0",
    "eslint-plugin-github": "^3.4.1",
    "eslint-plugin-jest": "^23.8.2",
    "jest": "^25.1.0",
    "jest-circus": "^25.1.0",
    "js-yaml": "^3.13.1",
    "prettier": "^1.19.1",
    "ts-jest": "^25.2.1",
    "typescript": "^3.8.3"
  }
}

这些依赖通过带有  --save  或  --save-dev  标志的  npm install  命令安装。 它们分别用于生产和开发/测试环境。 在下一节中，我们将更深入地研究这些软件包的安装。

同时，理解语义版本前面的符号非常重要（假设你已经阅读 semver 的  major.minor.patch  模型）：

• ^：表示最新的次版本，例如， ^1.0.4  可能会安装主版本系列  1  的最新次版本 1.3.0。
• 〜：表示最新的补丁程序版本，与  ^  类似， 〜1.0.4  可能会安装次版本系列 1.0  的最新次版本1.0.7。

所有这些确切的软件包版本都将记录在  package-lock.json  文件中。

package-lock.json

该文件描述了 npm JavaScript 项目中使用的依赖项的确切版本。如果  package.json  是通用的描述性标签，则  package-lock.json  是成分表。

就像我们通常不会读取食品包装袋上的成分表（除非你太无聊或需要知道）一样，package-lock.json  并不会被开发人员一行一行进行读取。

package-lock.json  通常是由  npm install  命令生成的，也可以由我们的 NPM CLI 工具读取，以确保使用  npm ci  复制项目的构建环境。

用户如何使用 NPM

从前面提到的 130 万个发布的软件包中，有 160 亿次下载，可以推断出，大多数 npm 用户都朝这个方向使用 npm。所以，了解如何使用这个强大的工具会很有帮助。

npm install

这是现在我们开发 JavaScript/Node.js 应用程序时最常用的命令。

默认情况下，npm install <package-name>  将安装带有  ^  版本号的软件包的最新版本。npm 项目上下文中的  npm install  将根据  package.json  规范将软件包下载到项目的  node_modules  文件夹中，从而升级软件包的版本（并重新生成  package-lock.json  ）。 npm install <package-name>  可以基于  ^  和  〜  版本匹配。

如果要在全局上下文中安装程序包，可以在机器的任何地方使用它，则可以指定全局标志  -g（例如  live-server）。

npm 使安装 JavaScript 软件包非常容易，以至于经常错误地使用此命令。 导致一些程序员对 npm 开这样的玩笑：

但是，npm 包太大、太深这样的问题可以通过  --production  标志来拯救！在上一节中，我们讨论了分别用于生产和开发/测试环境的  dependencies  和  devDependencies  。 这个  --production  标志是如何在  node_modules  中进行区别的。

通过将此标志附加到  npm install  命令，我们将仅从  dependencies  安装软件包，从而将  node_modules  的大小大大减小到应用程序正常运行所必需的大小。——不应该将  devDependencies  引入生产环境！

npm ci

因此，如果  npm install --production  对于生产环境是最佳选项，那么是否必须有一个对本地环境，测试环境最合适的选项？

答案是  npm ci。

就像如果  package_lock.json  尚不存在于项目中一样，无论何时调用  npm install  都会生成它，npm ci  会消耗该文件来下载项目所依赖的每个软件包的确切版本。

这样，无论是用于本地开发的笔记本电脑还是 Github Actions 等 CI（持续集成）构建环境，我们都可以确保项目上下文在不同机器上保持完全相同。

npm audit

随着越来越多的软件包发布，并且易于安装，因此 npm 软件包容易受到恶意作者的恶意攻击，例如这些。

意识到生态系统存在问题，npm.js 组织提出了  npm audit  的主意。 他们维护了一个安全漏洞列表，开发人员可以使用  npm audit  命令来审核项目中的依赖项。

npm audit  为开发人员提供了有关漏洞以及是否有要修复的版本的信息，例如：

如果补救措施在下一个不间断的版本升级中可用，则可以使用  npm audit fix  来自动升级受影响的依赖项的版本。

作者如何使用 NPM

我们已经了解了作为用户，如何通过 NPM CLI 有效得使用 NPM，但是作为作者又如何使用呢？

npm publish

将软件包发送到  npmjs.com  非常容易，因为我们只需要运行  npm publish  。 棘手的部分（并非专门针对 npm 软件包作者）是确定软件包的版本。

根据  semver.org  的经验法则：

1. 当你进行不兼容的 API 更改时使用 MAJOR 版本
2. 以向后兼容的方式添加功能时使用 MINOR 版本
3. 进行向后兼容的 bug 修复时使用 PATCH 版本

在发布软件包时，遵循上述规则尤为重要，可以确保你不会破坏任何人的代码，因为 npm 中匹配的默认版本是^（又称下一个次版本）。

❤️  npm  ❤️  JavaScript  ❤️  Node.js  ❤️

了解了以上知识，我们就可以开始有效地使用 npm 并指挥可爱的袋熊大军啦！

原文：What is npm? A Node Package Manager Tutorial for Beginners，作者：Stanley Nguyen

JS 模块系统到底是什么呢？

随着 JavaScript 开发越来越广泛，命名空间和依赖项变得越来越难以处理，极客们早已经开发出不同的模块系统解决方案来解决该问题。

为什么理解 JS 模块系统很重要

我的日常工作是设计和项目架构，并且我很快意识到跨项目需要许多通用功能。我总是一次又一次地将这些功能复制粘贴到新项目中。

问题是，每当更改一部分代码时，我都需要在所有项目中手动同步这些更改。为了避免所有这些繁琐的手动任务，我决定提取通用功能并从中组成一个 NPM 软件包。这样，团队中的其他人将能够将它们重新用作依赖项，并在每次推出新版本时都可以对其进行更新。

这种方法具有一些优点：

• 如果核心库中有一些更改，则只需在一个地方进行更改，而无需为同一件事重构所有应用程序的代码。
• 所有应用程序保持同步。无论何时进行更改，所有应用程序仅需要运行  npm update  命令。

因此，下一步是发布库  。

这是最困难的部分，因为我脑海中突然跳出一堆东西，例如：

1. 如何使用摇树优化
2. 应该针对哪些 JS 模块系统（CommonJS、AMD、ES modules）
3. 需要转译源码吗
4. 需要打包源码吗
5. 应该发布哪些文件

在发布第三方库（组件库，工具库）时，我们每个人的脑海中都应该冒出这些问题。

来， 我们一步步解决以上的问题。

不同类型的 JS 模块系统

1. CommonJS

• 由 Node.js 实现
• 多用在服务器端安装模块时
• 没有 runtime/async 模块
• 通过  require  导入模块
• 通过  module.exports  导出模块
• 无法使用摇树优化，因为当你导入时会得到一个模块时，得到的是一个对象，所以属性查找在运行时进行，无法静态分析
• 会得到一个对象的副本，因此模块本身不会实时更改
• 循环依赖的不能优雅处理
• 语法简单

2. AMD 异步模块定义

• 由 RequireJs 实现
• 当你在客户端（浏览器）环境中，异步加载模块时使用
• 通过  require  实现导入
• 语法复杂

3. UMD 通用模块定义

• CommonJs + AMD 的组合（即 CommonJs 的语法 + AMD 的异步加载）
• 可以用于 AMD/CommonJs 环境
• UMD 还支持全局变量定义，因此，UMD 模块能够在客户端和服务器上工作。

4. ES modules

• 用于服务器/客户端
• 支持模块的  Runtime/static loading
• 当你导入时，获得是实际对象
• 通过  import  导入，通过  export  导出
• 静态分析——你可以决定编译时的导入和导出（静态），你只需要看源码，不需要执行它

You can determine imports and exports at compile time (statically) — you only have to look at the source code, you don’t have to execute it

• 由于 ES6 支持静态分析  ，因此摇树优化是可行的
• 始终获取实际值 ，以便实时更改模块本身
• 比 CommonJS 有更好的循环依赖管理

现在，我们了解了不同类型的 JS 模块系统以及它们如何演变。

尽管所有工具和现代浏览器都支持 ES modules ，但我们在发布库时不知道用户如何利用我们的库。 因此，我们必须确保我们的库在所有环境中都能正常工作。

让我们深入研究并设计一个示例库，更好地回答与发布库有关的所有问题。

我已经建立了一个小型的 UI 库（你可以在 GitHub 上找到源代码），并且我将分享我在编译，打包和发布中的所有经验和探索。

在这里，我们有一个小的 UI 库，其中包含 3 个组件：Button，Card 和 NavBar。 让我们一步步进行编译并发布。

发布前的最佳实践

1. 摇树优化(Tree Shaking)

webpack 官方文档有说明

• 摇树优化是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如  import  和  export。这个术语和概念实际上是兴起于 ES2015 模块打包工具  rollup。新的 webpack 4 正式版本，扩展了这个检测能力，通过  package.json  的  "sideEffects"  属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是纯的 ES2015 模块，由此可以安全地删除文件中未使用的部分。
• webpack 和 Rollup 都支持摇树优化，这意味着我们需要牢记某些事情，以便我们的代码可被 Tree Shaking。

2. 发布所有模块形态

• 我们应该发布所有模块形态，例如 UMD 和 ES Module ，因为我们永远不知道用户在哪个版本的浏览器或 webpack 中使用此库/包。
• 即使所有打包程序（如 webpack 和 Rollup）都能解析 ES Module ，但如果我们的使用者使用的是 webpack 1.x，则它无法解析 ES 模块。

// package.json
{
  "name": "js-module-system",
  "version": "0.0.1",

  "main": "dist/index.js",
  "module": "dist/index.es.js"
}

• package.json 文件的 main 字段通常用于指向 UMD 版本的库/包。
• package.jso 文件的 module 字段用于指向 ES 版本的库/包。

鲜为人知的事实：webpack 使用 resolve.mainfields 确定检查  package.json  中的哪些字段。

性能提示：由于所有现代浏览器现在都支持 ES 模块 ，因此也请务必发布 ES 版本的库/包。这样一来，可以减少编译次数，最终可以减少向用户交付的代码。 这将提高应用程序的性能。

那么，下一步是什么？ 编译还是打包？ 我们应该使用什么工具？ 啊，这是最棘手的部分！让我们深入研究研究。

webpack vs Rollup vs Babel

这些我们在日常工作中使用的工具，用于承载我们的应用程序/库/软件包。没有它们，我无法想象现代的 Web 开发有多么糟糕。因此，我们无法将它们进行比较  ❌

每种工具都有其自身的优势，并根据使用者的需求达到不同的目的。

现在让我们看一下这些工具：

webpack

webpack是一个很棒的模块打包工具， 它被广泛接受并且主要用于构建 SPA。它提供了开箱即用的所有功能，例如代码拆分、按需加载、摇树优化等，并且它本身使用的是 CommonJS 模块系统。

RollupJS

RollupJS 还是类似于 webpack 的模块打包器。但是，RollupJS 的主要优点是它遵循 ES6 修订版中包含的代码模块的新标准化格式，因此你可以使用它来打包 ES module variant 的 library/package。但它不支持 按需加载。

Babel

Babel 是 JavaScript 的编译器，以将 ES6 代码转换为可在你的浏览器（或服务器）中运行的代码而闻名。请记住，它只是编译而不会打包你的代码。

我的建议：对库使用 Rollup.js，对应用程序使用 webpack。

编译（Babel-ify）源代码还是直接打包源代码

在构建我的 NPM 库时，我花费了大量时间来试图找出该问题（如何编译、如何打包）的答案。我开始挖掘自己的 node_modules，查找所有优秀的库并检查它们的构建系统。

在查看了不同 libraries/packages 的构建输出之后，我清楚地了解了这些库的作者在发布之前可能会想到的不同策略。 以下是我的观察。

如你在上图中所看到的，我已根据它们的特性将这些库/软件包分为两组：

• UI Libraries-UI 库（styled-components,  material-ui）
• Core Packages-核心包（react，react-dom）

你可能已经弄清楚了这两组之间的区别。

UI Libraries

• 有一个 dist 文件夹，该文件夹是针对 ES 和 UMD/CJS 模块系统  的打包和压缩版本。
• 有一个 lib 文件夹，用来存放被编译后的代码。

Core Packages

• 只有一个文件夹，其中包含针对 CJS 或 UMD 模块系统的打包和压缩版本。

但是，为什么 UI Libraries 和 Core Packages 的构建输出有所不同？？

UI Libraries

想象一下，如果我们只是发布库的 bundled version 将其托管在 CDN 上，我们的用户将直接在  <script />  标记中使用它。现在，如果使用者只想使用  <Button />  组件，则他们必须加载整个库。另外，在浏览器中，没有可以解决 tree shaking 的打包工具，最终我们会将整个库代码发送给我们的使用者。 因此，我们不能像如下代码引入整个库文件。

<script type="module">
  import { Button } from "https://unpkg.com/uilibrary/index.js";
</script>

现在，如果我们只是简单地将 src 转换为 lib 并将该 lib 托管在 CDN 上，那么我们的使用者实际上可以得到他们想要的任何东西而没有任何开销，“代码更少，加载更快”。  ✅

<script type="module">
  import { Button } from "https://unpkg.com/uilibrary/lib/button.js";
</script>

Core Packages

Core Packages（核心包）永远不会通过  <script />  标记使用，因为它们必须是主应用程序的一部分。因此，我们可以安全地发布这些软件包的构建版本（  UMD，ES），并将构建后的系统交给用户使用。

例如，他们可以使用  UMD  而不使用摇树优化，或者如果打包器能够识别并获得摇树优化的好处，则可以使用  ES  。

// CJS require
const Button = require("uilibrary/button");
// ES import
import {Button} from "uilibrary";

但是……关于我们的问题：should we  transpile (Babelify) the source or bundle it？？

对于 UI 库

• 当我们针对 es 模块系统构建时，需要 Babel 编译源代码，并将编译后的代码放置在 lib 文件夹中。我们甚至可以将 lib 托管在 CDN 上。
• 当我们针对 cjs/umd 模块系统和 es 模块系统 等多个模块系统构建时，需要  rollup  📦  打包和压缩代码。

下面我们修改  package.json  以指向对应的模块系统。

// package.json
{
  "name": "js-module-system",
  "version": "0.0.1",
  // for umd/cjs builds
  "main": "dist/index.js",
  // for es build
  "module": "dist/index.es.js"
}

对于 core packages，我们不需要 lib 版本。我们只需要针对 cjs/umd 模块系统和 es 模块系统，使用 rollup 进行  📦  打包和压缩源代码即可。

提示：对于愿意通过  <script />  标记下载整个库/软件包的用户，我们也可以在 CDN 上托管 dist 文件夹  。

我们怎么进行打包

我们应在在  package.json  中为了不同的目的编写不同的脚本。你能在 GitHub 上面找到 Rollup 的一些配置——rollup config

// package.json
{
  "scripts": {
    "clean": "rimraf dist",
    "build": "run-s clean && run-p build:es build:cjs build:lib:es",
    "build:es": "NODE_ENV=es rollup -c",
    "build:cjs": "NODE_ENV=cjs rollup -c",
    "build:lib:es": "BABEL_ENV=es babel src -d lib"
  }
}

我们应该发布哪些东西

• License
• README
• Changelog
• Metadata（  "main"  ,  "module"  ,  "bin"  ）—  package.json
• Control through  package.json  "files"  property

在  package.json  中， "files"  字段是一个数组类型 ，用来表示软件包被当做第三方依赖安装时，都有哪些文件或文件夹需要下载到业务项目中。如果你在数组中加入了一个文件夹，那么在你  npm install  时，文件夹及下面的文件都会被下载。

在我的示例项目中，我在  "files"  中加入了 lib 和 dist 文件夹。

// package.json
{
  "files": ["dist", "lib"]
}

最后，终于可以准备发布了。只需在终端中键入  npm run build  命令，你就看到以下输出。仔细查看 dist 和 lib 文件夹都有哪些东西。

总结

至此，我们已经了解了 JavaScript 模块系统以及如何创建自己的库并发布它。下面是一些注意事项：

1. 是否可以启用摇树优化
2. 至少需要构建  ES modules  and  CommonJS  两种模块系统
3. 使用 Babel 和 Bundlers 搭建 libraries
4. 使用 Bundlers 搭建 Core packages
5. 在  package.json  中使用  "module"  字段 来构建 es 模块的版本 (PS: 这有助于使用摇树).
6. 发布已编译的文件夹以及模块的编译版

原文：Learn the basics of the JavaScript module system and build your own library，作者：Kamlesh Chandnani