JavaScript开发工具简明历史

最新推荐文章于 2023-11-27 17:43:55 发布

a06_kassadin

最新推荐文章于 2023-11-27 17:43:55 发布

阅读量424

点赞数

分类专栏：「Node.js」

「Node.js」专栏收录该内容

7 篇文章 0 订阅

订阅专栏

每次写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 个文件夹的大项目了- -

a06_kassadin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript开发工具简明历史

每次写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>当需
复制链接

扫一扫