每次写js都要重头来过。。。
原文翻译 https://blog.fundebug.com/2017/11/29/history-of-javascript-tools/
开始
刚开始在 HTML 中引入 js 文件即可
<html lang="en">
<head>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
当需要第三方库时,则需要下载再引入,版本替换需要同样的操作
<script src="moment.js"></script>
<script src="index.js"></script>
moment.js 先载入,index.js 中可以使用 moment 方法
npm:包管理工具
npm init #生成 package.json
npm install moment --save #安装 moment 到 node_modules
当我们需要与其他人分享这个项目时,不需要 node_modules,npm install 即可安装 package.json 中定义的依赖,
代码变为了
<script src="node_modules/moment/moment.js"></script>
<script src="index.js"></script>
webpack - 打包工具
现在还是需要到 node_modules 里找文件来引入,而 CommonJS 出现后 require 可以直接引用模块。
// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());
但浏览器不支持。Browserify是2011年发布,曾经是最流行的打包工具;到了2015年, webpack逐渐成为了最主流的打包工具。
npm install webpack --save-dev
–save-dev 选项表示 webpack 模块时开发环境中需要的依赖库,而生产环境中并不需要
.\node_modules\.bin\webpack index.js bundle.js
将依赖和我们的代码打包成一个文件,就可以在浏览器里运行了
<script src="bundle.js"></script>
每次修改文件后都需要编译,比较麻烦,这是我们可以修改 webpack 配置
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
};
运行
./node_modules/.bin/webpack
Babel - 新语法特性转码器
js 更新很快,但浏览器更新的比较慢,因此新语法需要经过转换才能在更多的浏览器上运行
npm install --save-dev babel-cli babel-preset-env babel-loader
更新 webpack 配置
// 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-preset-env中的转码规则,使用babel-loader进行转码。
现在就可以使用 js 的一些新特性了,比如字符串模板
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);
查看 bundle.js 可以看到
var name = "Bob",
time = "today";
console.log("Hello " + name + ", how are you " + time + "?");
代码被转义成了浏览器支持的语法
npm scripts - 任务管理工具
任务管理工具可以将一些重复性的任务自动化,比如合并文件、压缩代码、优化图片以及运行测试等。
2013年时,Grunt是最流行的任务管理工具,其次是Gulp。现在,直接使用npm的scripts功能的开发者似乎越来越多了,这样不需要安装额外的插件。
修改package.json,即可配置npm scripts:
{
"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": "webpack --progress -p",
"watch": "webpack --progress --watch"
运行 build,即可构建代码了(- -progress选项可以显示构建进程,-p选项可以压缩代码):
npm run build
运行watch,则一旦javascript修改了,就会自动重新运行wepback,这样开发就方便多了:
npm run watch
还有,我们可以webpack-dev-server,它可以提供一个网页服务器,而且能够自动重载页面:
npm install webpack-dev-server --save-dev
增加新的 script
"server": "webpack-dev-server --open"
运行
npm run server
这时候修改代码就会自动转义、打包、刷新浏览器,一切都简单了。
同时这个项目也变成了 33.5 MB,10,224 个文件,1,475 个文件夹的大项目了- -