Clever Geek Handbook

最新の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 , . , , « ». , , .













More articles:


All Articles