Для начала работы с nodejs достаточно этой статьи

0. Цели обучения

Возможность установки Node.js согласно документации

Возможность установки компонентов с помощью npm

Возможность упаковать js с помощью webpack

Может определить разницу между переменными let и const в es6

Управление свойствами объекта с помощью выражений деструктурирования

Возможность экспорта файлов модуля с помощью экспорта

Возможность импортировать файлы модулей с помощью импорта

1. Node.js

1.1 Что такое Node.js

Проще говоря, Node.js — это JavaScript, работающий на стороне сервера.
Node.js — это платформа, построенная на среде выполнения Chrome JavaScript.

Node.js — это среда JavaScript на стороне сервера, управляемая событиями. Основанный на движке Google V8, движок V8 выполняет JavaScript очень быстро и имеет очень хорошую производительность.

1.2. Установка Node.js

1. Загрузите версию Node.js, соответствующую вашей системе.

https://nodejs.org/en/download/。

2. Выберите каталог установки для установки

Рекомендуется скачать LTS-версию. По умолчанию следует перейти к следующему шагу во время установки.

После этого введите в консоли:

# 查看node版本信息
node -v

1.3. Быстрый старт

1.3.1 Создайте тестовый проект

1.3.2 Консольный вывод

Теперь сделаем простейший пример, показывающий как вывести в консоль, создадим текстовый файл demo1.js, код содержимого

var a=1;
var b=2;
console.log(a+b);

Введите команду в командной строке

node demo1.js

1.3.3 Использование функций

Создайте текстовый файл demo2.js

var c=add(100,200);
console.log(c);
function add(a,b){
    return a+b;
}

Командная строка для ввода команды

узел demo2.js

После запуска вы можете увидеть, что вывод равен 300

1.3.4 Модульное программирование

Каждый файл является модулем и имеет свою собственную область видимости. Переменные, функции и классы, определенные в файле, являются частными и невидимыми для других файлов.

Создайте текстовый файл demo3_1.js

exports.add=function(a,b){
    return a+b;
}

Внутри каждого модуля переменная модуля представляет текущий модуль. Эта переменная является объектом, чьим свойством exports (т.е. module.exports) является внешний интерфейс. Загрузка модуля фактически загружает свойство module.exports модуля.

Создайте текстовый файл demo3_2.js 

//引入模块demo3_1
var demo= require('./demo3_1');
console.log(demo.add(400,600));

Введите команду в командной строке

node demo3_2.js

Результат 1000 

1.3.5 Создание веб-сервера

Создайте текстовый файл 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 demo4.js

После запуска сервиса открываем браузер и вводим URL
http://localhost:8888/

Вы можете увидеть результат вывода веб-страницы Hello World

Нажмите Ctrl+c в командной строке, чтобы завершить выполнение.

1.3.6 Понимание рендеринга на стороне сервера

Создайте 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.

1.3.7 Получение параметров

Создать demo6.js

//引入http模块
var http = require("http");
var url = require("url");
//创建服务，监听8888端口
http.createServer(function (request, response) {
    
    //发送http头部
    //http响应状态200
    //http响应内容类型为text/plain
    response.writeHead(200, {"Content-Type": "text/plain"});
    //解析参数
    //参数1:请求地址; //参数2:true时query解析参数为一个对象，默认false
    var params = url.parse(request.url, true).query; //将所有请求参数输出
    for (var key in params) {
        response.write(key + " = " + params[key]);
        response.write("\n");
    }
    response.end("");
}).listen(8888);
console.log("Server running at http://127.0.0.1:8888 ")

Введите команду в командной строке

node demo6.js

Посетите http://127.0.0.1:8888?id=123&name=zhangsan в браузере Результат теста:

2. Обозреватель пакетов NPM

2.1 Что такое НПМ

npm расшифровывается как Node Package Manager, который представляет собой инструмент управления пакетами узлов и их распространения. На самом деле, мы можем понимать NPM как интерфейсный Maven.

Через npm вы можете легко загружать js-библиотеки и управлять внешними проектами.

Теперь node.js интегрировал инструмент npm, введите npm -v в командной строке, чтобы просмотреть текущую версию npm.

2.2. Команды NPM

2.2.1 Проект инициализации

Команда init — это команда инициализации проекта. Создайте пустую папку или в приведенном выше примере проекта введите папку в командной строке и выполните инициализацию команды

npm init

Введите соответствующую информацию по запросу или просто нажмите Enter, если используется значение по умолчанию.

имя: название проекта

версия: номер версии проекта

описание: описание предмета

ключевые слова: {массив} ключевых слов, чтобы пользователи могли легко искать наши проекты.

Наконец, будет сгенерирован файл package.json, который является файлом конфигурации пакета, который эквивалентен pom.xml maven и может быть изменен по мере необходимости.

 

2.2.2 Локальная установка

Команда install используется для установки модуля, который можно добавить в проект через require. Если мы хотим установить экспресс-модуль (веб-фреймворк узла), команда вывода выглядит следующим образом:

npm install express
--如果下载慢可以参考本章2.2.5小结,使用cnpm淘宝镜像
--cnpm install express

Появится предупреждающее сообщение, вы можете игнорировать его, будьте уверены, что вы успешно выполнили команду.

В этом каталоге появилась папка node_modules и package-lock.json.

Папка node_modules используется для хранения загруженной библиотеки js (эквивалентно локальному складу maven).

package-lock.json — это файл, который автоматически генерируется при изменении node_modules или package.json. Основная функция этого файла заключается в определении зависимостей установленных в данный момент пакетов, чтобы такие же зависимости были сгенерированы при последующей переустановке, при этом игнорируя обновления, которые произошли в некоторых зависимостях в процессе разработки проекта (могут быть изменения в разные зеркальные источники, одинаковые большие Могут быть проблемы с совместимостью под номером версии, package-lock может гарантировать, что даже при изменении источника загруженный файл останется таким же, как и оригинал).

Мы снова открываем файл package.json и обнаруживаем, что загруженный только что экспресс был добавлен в список зависимостей.

Об определении номера версии:

指定版本:比如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:安装最新版本。

2.2.3. Глобальная установка

Мы только что использовали локальную установку, которая установит библиотеку js в текущий каталог, а глобальная установка установит библиотеку в ваш глобальный каталог. После глобальной установки вы можете использовать содержимое или команды, соответствующие установленным модулям, в командной строке.

Если вы не знаете, где находится ваш глобальный каталог, выполните команду, чтобы просмотреть путь к глобальному каталогу.

npm root -g

Глобальный каталог WINDOWS по умолчанию находится в

C:\Users\ваше имя пользователя\AppData\Roaming\npm\node_modules

Глобальный каталог MAC по умолчанию находится в

/usr/local/lib/node_modules

Например, чтобы установить jquery глобально, введите следующую команду

# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件
npm install jquery -g

Уведомление:

Автор использует систему Mac. При появлении запроса о недостаточности разрешений используйте команду sudo -s, чтобы переключиться на пользователя root.

windows нужно запускать cmd от имени администратора

2.2.4 Пакетная загрузка

Скачайте какой-нибудь код из интернета и обнаружите, что есть только package.json и нет папки node_modules.В это время вам нужно заново скачать эти js библиотеки через команду.

Войдите в каталог (каталог, в котором находится package.json) и введите команду

npm install

На этом этапе npm автоматически загрузит зависимую библиотеку js в package.json.

2.2.5 Переключение зеркал NPM

Иногда мы используем npm для очень медленной загрузки ресурсов, поэтому мы можем переключить источник загруженного зеркала (например, зеркало Taobao) или установить cnmp (указать зеркало Taobao), чтобы ускорить скорость загрузки.

1. Если вы используете метод переключения зеркальных источников, вы можете использовать инструмент: nrm

Сначала установите nrm, где -g означает глобальную установку.

# 管理员身份 打开cmd执行如下命令
npm install nrm -g

Затем используйте команду nrm ls для просмотра списка репозиториев npm, тот, что отмечен *, — это текущий выбранный зеркальный репозиторий:

 Укажите источник зеркала для использования с помощью nrm, используйте taobao:

 

2. Если вы используете cnpm, сначала установите cnpm и введите следующую команду

# 如果不使用nrm 切换，可以在安装cnpm的时候指定镜像仓库
npm install -g cnpm --registry=https://registry.npm.taobao.org

После установки мы можем использовать следующую команду для проверки версии cnpm.

cnpm -v

 использовать cnpm

cnpm install 需要下载的js库;一般只有在下载模块的时候才使用cnpm，其它情况还是一样使用npm;

2.2.6 Инструкции по эксплуатации

Если мы хотим запустить проект, используйте команду запуска

Если сценарии, определенные в package.json, имеют:

• dev — тестовый прогон фазы разработки
• build — собрать и скомпилировать проект
• lint для запуска обнаружения кода js

Формат команды времени выполнения:

npm run dev或者build或者lint

2.2.7 Составление описания проекта

Скомпилированный код будет помещен в папку dist, войдите в командную строку и введите команду

npm run build

生成后会发现只有个静态页面，和一个static文件夹
这种工程我们称之为单页Web应用(single page web application，SPA)，就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
这里其实是调用了webpack来实现打包的，关于webpack下面的章节将进行介绍。

3. Начало работы с Webpack

3.1 Что такое веб-пакет

Webpack — это интерфейсный инструмент для загрузки/связки ресурсов. Он выполнит статический анализ в соответствии с зависимостями модулей, а затем сгенерирует соответствующие статические ресурсы для этих модулей в соответствии с заданными правилами. веб-пакеты

 Как мы видим из рисунка, Webpack может преобразовывать различные статические ресурсы js, css и т.д. в статический файл, уменьшая запросы страниц. Далее я кратко расскажу об установке и использовании Webpack.

3.2. Установка веб-пакета

Установить глобально

npm install webpack -g
npm install webpack-cli -g

Если установка не удалась, удалите соответствующую папку веб-пакета в глобальном каталоге и выполните приведенную выше команду.

 Проверьте номер версии после установки

webpack -v

3.3. Быстрый старт

3.3.1. JS-упаковка

(1) Создайте папку src и создайте bar.js

exports.info=function(str){
   document.write(str);
}

(2) Создайте logic.js в src

exports.add=function(a,b){
    return a+b;
}

(3) Создайте main.js в src

var bar= require('./bar');
var logic= require('./logic');
bar.info( '100 + 200 = '+ logic.add(100,200));

(4) Создайте файл конфигурации webpack.config.js, который находится в том же каталоге, что и src.

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
//入口文件
    entry: "./src/main.js", output: {
        //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    }
}

Приведенный выше код означает: прочитать содержимое main.js (файл входа) в папке src в текущем каталоге, упаковать соответствующий файл js, поместить упакованный файл в папку dist текущего каталога и упаковать файл js Файл имя пакета.js

  (5) Выполните команду компиляции

 (7) Создайте index.html и ссылку на bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>nodejs测试</title>
<script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

Откройте файл index.html в браузере, и вы обнаружите вывод контента.

3.3.2. CSS-упаковка

(1) Установите style-loader и css-loader
Сам Webpack может обрабатывать только модули JavaScript.Если вы хотите обрабатывать другие типы файлов, вам нужно использовать загрузчик для преобразования.

Под загрузчиком можно понимать конвертер модулей и ресурсов, сама по себе это функция, которая принимает в качестве параметров исходные файлы и возвращает результат конвертации. Таким образом, мы можем загрузить модуль или файл любого типа, например CoffeeScript, JSX, LESS или изображения, через require. Прежде всего, нам нужно установить соответствующий плагин Loader, css-loader для загрузки css в javascript, style-loader для того, чтобы javascript знал css.

cnpm install style-loader css-loader --save-dev

-save означает установку модуля в каталог проекта и запись зависимостей в узел зависимостей файла пакета. При запуске npm install
--production или указании значения переменной NODE_ENV как production модуль будет автоматически загружен в директорию node_modules.

-save-dev означает установку модуля в каталог проекта и запись зависимостей в узел devDependencies файла пакета. При запуске npm install --production или указании значения переменной NODE_ENV как production модуль не будет автоматически загружаться в директорию node_modules.

cnpm install less less-loader --save-dev

 (2) Изменить webpack.config.js

var path = require("path");
//exports 就是 module.exports，
// 但是这里直接是赋值，所以不能直接使用exports，否则exports就不是module.exports了
module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //__dirname 是node的一个全局变量，获得当前文件所在目录的完整目录名
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }
        ]
    }
}

(3) Создайте папку css в папке src и создайте css1.css в папке css.

body {
    background-color: blue;
}

 (4) Измените main.js и добавьте css1.css

(5) Перезапустите веб-пакет

(6) Запустите index.html, чтобы увидеть, станет ли фон синим?