13 530
правок
Изменения
м
=== Упаковщики @@ ==Актуальное:* {{mag|browserify}} — упаковка npm-модулей (CommonJS) для браузера* {{mag|webpack}} — универсальная система сборки (AMD / CommonJS / ES6 модулей) + CSS + картинки + whatever* {{mag|stealjs}} — для многостраничных сайтов* [http://gulpjs.com/ gulp] — запускатор скриптов сборки* uglifyjs — обфускатор
* gruntЧуть старее:* gulpyui-compressor — обфускатор* browserifygrunt — запускатор скриптов сборки (часто grunt+bower)* webpackbower — пакетный менеджер (рассказал выше)* stealjsrequirejs — система загрузки и сборки AMD модулей
Нет описания правки
''Но в итоге, конечно, все перейдут на Promise.''
=== Модули ES6 @@ ===
<source lang="javascript">
// lib/math.js
export function sum (x, y) { return x + y };
export var pi = 3.141593;
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default (x) => Math.exp(x);
// someApp.js
import exp, { pi, e } from "lib/mathplusplus";
console.log("e^{π} = " + exp(pi));
</source>
{{gray|Оговорка: чёткой уверенности, что это лучше CommonJS, у меня нет.}}
=== Template strings @@ ===
== Обзор инструментов @@ ==
* Пакетные менеджеры* Сборка, преобразования и минификация* Poly- и Pony- fill’ы === Transpiler’ы Системы модулей @@ === * {{green|AMD}} (RequireJS): Asynchronous Module Definition* {{green|CommonJS}} (node.js)* {{green|UMD}} (AMD+CommonJS, поддерживается и там, и там)* {{green|Модули ES6}} (уже рассказал) AMD и UMD, по сути, знать не нужно — используются они уже редко. ==== CommonJS @@ ==== ИМХО — самый краткий и удобный синтаксис. <source lang="javascript">const pg = require('pg');const gen = require('gen-thread'); module.exports.method = function() { /*...*/ }; // или даже:module.exports = MyClass; function MyClass(){}/*...*/</source> ==== AMD @@ ==== <source lang="javascript">define(['jquery', 'underscore'], function ($, _) { // methods function a(){}; // private because it's not returned (see below) function b(){}; // public because it's returned function c(){}; // public because it's returned // exposed public methods return { b: b, c: c }});</source> ==== UMD @@ ==== <source lang="javascript">(function (root, factory) { if (typeof define === 'function' && define.amd) define(['jquery', 'underscore'], factory); else if (typeof exports === 'object') module.exports = factory(require('jquery'), require('underscore')); else root.returnExports = factory(root.jQuery, root._);}(this, function ($, _) { function a(){}; // private because it's not returned (see below) function b(){}; // public because it's returned function c(){}; // public because it's returned return { b: b, c: c }}));</source> === Пакетный менеджер [https://www.npmjs.com/ NPM] @@ === * Использует систему модулей CommonJS* Ставит зависимости '''рекурсивно''' (node_modules/module1/node_modules/module2/…)* Можно их упростить: '''npm dedup''' Пользоваться им не просто, а очень просто:* Установить модуль: {{green|npm install [-g] [--save] [--save-dev] module}}* Создать package.json для проекта: {{green|npm init}}* Зарегистрироваться/залогиниться: {{green|npm login}}* Опубликовать свой модуль: {{green|npm publish}} {{mag|Самих модулей столько, что аж страшно.}} === <s>[https://bower.io/ Bower]</s> @@ === * {{red|Ещё один пакетный менеджер}}* Ставится из npm O_o* Команды примерно те же: install, init… те же semver’ы* {{red|Основные отличия - AMD и плоское дерево зависимостей...}}*: {{green|то есть как будто вы просто сказали npm dedup}}*: {{gray|только свалится, если что-то несовместимо по semver}} : ⇒ Нафиг-нафиг. === Transpiler: Babel/Bublé @@ ===
Как писать на ES6, если он не везде поддерживается?
{{green|Ответ - Ответ — Babel!}}
* REPL: https://babeljs.io/repl/
''Transpiler — транслятор JS в JS. Другие: [https://buble.surge.sh/ Bublé], [https://github.com/google/traceur-compiler Traceur].''
=== Обфускаторы Сборка, упаковка и минификация @@ === * yui-compressor (старьё)* uglifyjs
[[Категория:VitaliPrivate]]