We explain the modern JavaScript dinosaur

If you have not studied JavaScript from the very beginning, then mastering its modern version is difficult. The ecosystem is rapidly growing and changing, so it is difficult to deal with the problems for solving which various tools are invented. I started programming in 1998, but I began to understand JavaScript only in 2014. I remember browsing Browserify and looking at its slogan:

Browserify allows you to do require ("modules") in the browser, combining all your dependencies

I did not understand a word of the proposal and began to understand how this can help me as a developer.

The purpose of the article is to tell about the context in which tools in JavaScript evolved up to 2017. We will start from the very beginning and will make the site, as dinosaurs would have done - without any tools, in pure HTML and JavaScript. Gradually, we will introduce different tools, alternately considering the problems they solve. Thanks to the historical context, you can adapt to and understand the ever-changing landscape of JavaScript.

Oldschool JavaScript

Let's make an "old school" site using only HTML and JavaScript. In this case, you have to manually download and link files. Here is a simple index.html that refers to a javascript file:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="index.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

<script src="index.js"></script> JavaScript- index.js, :

// index.js
console.log("Hello from JavaScript!");

! , moment.js ( ). , , JS moment:

moment().startOf('day').fromNow();        // 20

moment.js ! moment.js :

, «» . , moment.js , moment.min.js index.html.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link rel="stylesheet" href="index.css">
  <script src="moment.min.js"></script>
  <script src="index.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

, moment.min.js index.js, index.js moment:

// index.js
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());

JS-. , .

JavaScript (npm)

2010- , . Bower 2013-, 2015- npm. , 2016- yarn npm, npm-.

npm node.js, JavaScript, , . , .

: , . , . , JavaScript ( ).

, npm moment.js . node.js, npm, index.html :

$ npm init

( Enter, ), package.json. , npm . package.json :

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

JS- moment.js npm, :

$ npm install moment --save

moment.js node_modules.
package.json moment.js .

{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  }
}

, : node_modules ( ) package.json, npm install.

moment.js , npm . node_modules, node_modules/moment/min moment.min.js. , index.html npm moment.min.js:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="node_modules/moment/min/moment.min.js"></script>
  <script src="index.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

, npm . node_modules, HTML. , , .

(bundler) JavaScript- (webpack)

. JS , , ( ). JS- .

moment.js example — moment.min.js HTML, moment, , moment.min.js ( , ).

2009- CommonJS, JavaScript. CommonJS , JS , . CommonJS node.js.

, node.js — JavaScript, . node.js-: moment.min.js HTML JS- :

// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());

, node.js — . npm-, require('./node_modules/moment/min/moment.min.js) require('moment').

, , , , require . , : , ( ) ( ).

(bundler). , . , . require ( , , JS-) . JS- require!

Browserify, 2011 . node.js- require ( npm ). 2015- webpack ( - React, ).

, webpack require('moment'). . webpack — npm-, :

$ npm install webpack --save-dev

--save-dev — , production-. package.json, :

{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  },
  "devDependencies": {
    "webpack": "^3.7.1"
  }
}

webpack node_modules. :

$ ./node_modules/.bin/webpack index.js bundle.js

webpack index.js, require , bundle.js. , index.js, require. bundle.js, index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="bundle.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

, , .

, webpack- index.js. , webpack ( ), . Webpack webpack.config.js :

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.js webpack :

$ ./node_modules/.bin/webpack

index.js bundle.js, webpack webpack.config.js. , . .

. . JS- JavaScript require, <script> HTML. JS- . , .

(babel)

— , . -: , , .

, CSS Sass, Less Stylus. JavaScript - CoffeeScript ( 2010), babel TypeScript. CoffeeScript JavaScript — , (whitespace) . . Babel — , , JavaScript , , (ES2015 ), JavaScript (ES5). Typescript — , JavaScript , . babel, JavaScript.

babel webpack-. ( npm-) :

$ npm install babel-core babel-preset-env babel-loader --save-dev

, :

babel-core — babel;
babel-preset-env — , , JavaScript ;
babel-loader — , babel webpack.

webpack babel-loader, webpack.config.js:

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

( , ). , webpack .js- ( node_modules) babel- babel-loader babel-preset-env. webpack .

, JavaScript ES2015! (template string) ES2015 index.js:

// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);

ES2015 require, :

// index.js
import moment from 'moment';
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);

import require, import . index.js, webpack:

$ ./node_modules/.bin/webpack

index.html . , ES2015, , babel. IE9 bundle.js :

// bundle.js
// ...
console.log('Hello ' + name + ', how are you ' + time + '?');
// ...

babel ES2015 JavaScript- , . , , — . JavaScript , async/await. , , .

, . , . webpack JavaScript, . .

(task runner) (npm-)

, — . - , , . .

2013- Grunt, Gulp. , , . , npm, .

npm- webpack. package.json:

{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "webpack": "^3.7.1"
  }
}

— build watch. :

$ npm run build

webpack ( webpack.config.js) --progress, , -p . watch:

$ npm run watch

--watch webpack JavaScript-, .

, package.json webpack ./node_modules/.bin/webpack, node.js npm-. ! , webpack-dev-server, - . :

$ npm install webpack-dev-server --save-dev

npm- package.json:

{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "webpack": "^3.7.1"
  }
}

$ npm run server

index.html localhost:8080 ( ). JavaScript- index.js webpack-dev-server JavaScript . , , , .

webpack webpack-dev-server, ( ). npm- Sass CSS, , — , . :

JavaScript. HTML JS :

;
;
JS;
.

, , . - , . , - .

, . , node- . npm , node- require import npm- . , - !

, -. Ember ember-cli, angular-cli Angular, create-react-app React, vue-cli Vue . . , . , . webpack, babel . . , .

JavaScript , . , , « ». , , .

Source: https://habr.com/ru/post/340922/

All Articles