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