最新消息:20210917 已从crifan.com换到crifan.org

【整理】JavaScript JS发展历史 从手动添加js到包管理器 构建工具

JS crifan 1693浏览 0评论

这个:

Modern JavaScript Explained For Dinosaurs – Peter Jang – Medium

解释的还是比较清楚的。

最开始是:

1.手动下载moment.min.js,加到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>

对应的:

// index.js
console.log(“Hello from JavaScript!”);
console.log(moment().startOf(‘day’).fromNow());
  • 优点:无须第三方工具,简单明了

  • 缺点:每个第三方库js库都要自己手动下载(和升级)

2.后来变成:用npm管理包

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”
  }
}

html:

<!– 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>
  • 优点:不用每次自己手动下载js库文件了

  • 缺点:每次都要到node_modules中找到对应的js库文件

3.再到:

用webpack打包

把:

<code>require('./node_modules/moment/min/moment.min.js)
</code>

换成了:

<code>require('moment’)
</code>

写法变成了:

// index.js
var moment = require(‘moment’);
console.log(“Hello from JavaScript!”);
console.log(moment().startOf(‘day’).fromNow());

作为 JS模块打包器(JavaScript module bundler)

2011:Browserify

2015:webpack

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.config.js:

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

转载请注明:在路上 » 【整理】JavaScript JS发展历史 从手动添加js到包管理器 构建工具

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
99 queries in 0.196 seconds, using 23.34MB memory