这个：
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’ } }; |