Geekly Articles each Day

最新のJavaScriptを恐竜に説明する


JavaScriptを最初から研究していない場合、その最新バージョンを習得することは困難です。 エコシステムは急速に成長し、変化しているため、さまざまなツールが発明されたソリューションの問題に対処することは困難です。 1998年にプログラミングを開始しましたが、2014年にJavaScriptを理解するようになりました。 Browserifyをブラウジングして、そのキャッチフレーズを見たのを覚えています。


Browserifyでは、すべての依存関係を組み合わせて、ブラウザーでrequire（「モジュール」）を実行できます。


私はこの提案から一言も理解せず、これが開発者としてどのように役立つかを理解し始めました。


この記事の目的は、JavaScriptのツールが2017年まで開発されたコンテキストについて話すことです。 最初から始めましょう。恐竜と同じように、ツールを使用せずに、純粋なHTMLとJavaScriptでサイトを作成します。 徐々に、さまざまなツールを紹介し、それらが解決する問題を交互に検討します。 その歴史的背景のおかげで、JavaScriptの絶え間なく変化する状況に適応して理解することができます。


オールドスクールJavaScript


HTMLとJavaScriptのみを使用して「古い学校」のサイトを作りましょう。 この場合、ファイルを手動でダウンロードしてリンクする必要があります。 JavaScriptファイルにリンクする簡単なindex.htmlを次に示します。


<!-- 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

:


  1. moment.js node_modules.
  2. 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

, :



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 :



, , . - , . , - .


, . , 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/J340922/

More articles:


All Articles