js去空格-【第1117期】萌新也能懂的现代 JavaScript 开发

前言

前端老人家一定知道这些演变的历史，如果你是初学者看完对这几年的发展有一个大概的了解。今日早读文章由@Murphy翻译分享。

正文从这开始～

js去空格_js replace 空格_ie8 js 去空格

有时候入门没入好，学习起现代的 JavaScript 开发还是颇有难度的。生态系统太日新月异以至于让人难以理解不同工具的出现究竟是为了解决什么问题。我从 1988 年开始编程，但直至 2014 年才开始认真地学习起 JavaScript。记得那时第一次遇到 Browserify 时看着它的标语：

Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.

这句话里的单词我一个都看不懂，不知道为什么这个东西会对自己这样一个开发者能有用。

本篇文章的目标便是提供一个有关 JavaScript 工具进化的历史视角，看看它们是怎么一步一步演变到如今 — 2017 年的这个样子的。开始的开始，我们将像最原始的恐龙家族一样建一个网站 — 不依赖任何工具，就用最简单的 HTML 和 JavaScript。然后再循序渐进引入不同的工具，看看每个工具分别解决了什么问题。开始吧~

“守旧派”使用 JavaScript 的方法

首先，来像“守旧派”一样使用 HTML 和 JavaScript 来建个网站 — 手动下载和内联文件。像这样~



<html lang="en">

    <meta charset="UTF-8">
    </span><span class="pln">JavaScript Example</span><span class="tag">
    <script src="index.js">


    Hello from HTML!

这行指的是引入在同一目录下的一个叫做 index.js 的单独文件：

<code class="lang-javascript" style="box-sizing: border-box;font-size: 13.6px;">// index.jsconsole.log("Hello from JavaScript!");

这几乎就是你建站需要的一切了~ 现在呢，你想加进去一个其他人写的库，例如 moment.js （一个以可读性更好的方式格式化日期的库）。例如，你可以像这样使用一个 moment 函数：

moment().startOf('day').fromNow(); // 20 hours ago

但这是假设你已经在网站中包括了 moment.js 的前提下！在 moment.js 的主页上，你可以看到如下的指南：

js replace 空格_js去空格_ie8 js 去空格

Hmm，在 Install 这部分右边貌似有很多东西啊！先无视它 — 我们可以下载 moment.min.js 文件到同级目录中，并在 index.html 中引入：



<html lang="en">

  <meta charset="UTF-8">
  </span><span class="pln">Example</span><span class="tag">
  <link rel="stylesheet" href="index.css">
  <script src="moment.min.js">
  <script src="index.js">


  Hello from HTML!

注意 moment.min.js 会在 index.js 之前下载完成，所以你可以在 index.js 中像这样使用 moment 函数：

// index.jsconsole.log("Hello from JavaScript!");console.log(moment().startOf('day').fromNow());

这就是我们怎么利用 JavaScript 库建站！这种方式的好处是非常容易理解。然而坏处是当库的作者更新时，每次寻找和下载新的版本就会很烦。

使用 JavaScript 包管理工具（npm）

大约从 2010 年开始，几个相互竞争的 JavaScript 包管理工具开始出现，来帮人们从中心仓库中自动完成下载和升级的流程。Bower 在 2013 年可以说是最流行的一个了，但最终在 2015 年左右还是被 npm 打败了。（值得一提的是，大约从 2016 年开始，yarn 作为一个可选的 npm 替代开始占据一席之地，但 npm 仍占上风。）

注意到，npm 作为一个包管理工具，最开始是专门为 node.js — 一个运行在服务器端的 JavaScript 运行时 (runtime) 而准备的，并不是前端。所以选择它作为在浏览器中运行 JavaScript 的前端包管理工具似乎有些奇怪。

注意：使用包管理工具通常涉及命令行的使用，在以前这并不是一个前端开发者所必须的技能。如果你从未使用过，可以阅读这篇教程概览一番。无论如何，知道如何使用命令行也是现代 JavaScript 开发的一部分（这也是进入其他领域重要的一步）。

让我们看看怎么使用 npm 来自动完成 moment.js 的安装。如果你安装了 node.js，npm 也就已经随之安装了，你可以操纵你的命令行进入 index.html 目录下并输入：

$ npm init

这将会引导你填写几个问题（默认值也可以，你可以一直敲 “Enter” 键）并生成一个叫做 package.json 的文件，大概长这样：

{   
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

要安装 monment.js 包的话，我们可以按照主页上介绍的 npm 安装方法在命令行敲下：

$ npm install moment --save

这行命令做了两件事 — 第一，它从 moment.js package 下载了所有代码到一个叫 node_modules 的文件夹中。第二，它自动修改了 package.json 文件来追踪 moment.js 作为项目的依赖：

{
 "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"
 }
}

这在和他人共享项目时非常有用 — 并不需要直接共享 node_modules 文件夹（可能会非常大），你只需要共享你的 package.json 文件，其他开发者便可以使用命令 npm install 自动安装项目所需要的包。

现在，我们不再需要从网站上手动下载 moment.js 了，我们可以使用 npm 自动下载和更新。然后看一下 node_modules 内部，发现 moment.min.js 文件位于 node_modules/moment/min 目录。所以可以把 npm 下载的版本的 moment.min.js 像这样引入 index.html 文件：



<html lang="en">

 <meta charset="UTF-8">
 </span><span class="pln">JavaScript Example</span><span class="tag">
 
 <script src="node_modules/moment/min/moment.min.js">
 <script src="index.js">


 Hello from HTML!

所以好消息是我们现在可以通过命令行使用 npm 下载和更新包了。坏消息是我们还得搜寻整个 node_modules 目录来定位每个包的路径再手动添加到我们 HTML 文件中。实在太太不方便了，所以下一步，来看看怎么把这个过程也自动化起来吧。

js去空格_js replace 空格_ie8 js 去空格

使用 JavaScript 模块打包工具（webpack）

大多数编程语言都会提供从一个文件导入另一个文件代码的机制。然而 JavaScript 最初设计时并没有这个特性，因为 JavaScript 原本是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（安全考虑）。所以很长一段时间以来，组织多个文件的 JavaScript 代码就是把每个文件下载下来，变量是全局共享的。

这实际上和我们刚才对 moment.js 的所做的并无二致 — 把整个的 moment.min.js 文件下载到 HTML 中，定义了一个全局变量 moment，对于所有在 moment.min.js 之后下载的文件都可用（无论是否真的需要它）。

2009 年，一个叫做 CommonJS 的项目兴起，目标是规范 JavaScript 在浏览器之外的生态系统。CommonJS 中很大的一部分便是对模块系统的规范，允许 JavaScript 像大多数编程语言那样允许导入导出代码而不用借助于全局变量。最知名的对 CommonJS 模块规范的实现便是 node.js。（译者注：Node 在实现中也并非完全按照规范js去空格，而是对模块规范进行了一定取舍，同时增加了一些自身需要的特性。）

ie8 js 去空格_js replace 空格_js去空格

如前所述，node.js 是为 JavaScript 设计在服务器端的一个运行时。假如让我们用 node.js 模块来重写前面的例子的话，不需要把整个 monment.min.js 文件用 HTML 标签下载下来，你可以直接在 JavaScript 文件中这样加载：

// index.js
var moment = require('moment');console.log("Hello from JavaScript!");console.log(moment().startOf('day').fromNow());

然而，这是在 node.js 中才起作用的模块加载方法， node.js 作为一个服务器端语言，有权限访问计算机的文件系统，因此工作良好。Node.js 还知道每个 npm 模块的路径，所以我们不需要写上 require(‘./node_modules/moment/min/moment.min.js)js去空格，而可以直接写 require(‘moment’)— 是不是很贴心~

对 node.js 来说这一切都很棒，但是如果你真的把上面的代码运行在浏览器中的话，你会得到一个报错 require is not defined。浏览器没有对文件系统的权限，这就意味着用这种方式加载模块很难搞 — 文件必须被动态地加载，或者同步地加载（减慢执行速度）或者异步地加载（不能保证时间顺序）。

这就是模块打包器随之出现的原因。JavaScript 模块打包器是一个能在代码构建过程（有文件系统权限）绕过这个问题并打包生产出兼容于浏览器的生产版本（不再需要有文件系统权限）的工具。在这个例子中，我们需要一个模块打包器，找到所有 require 语句（它在浏览器端的 JavaScript 中是非法的）并把它们替换成想 require 的文件实际的内容。最终结果是一个打包后的 JavaScript 文件（没有 require 语句）！

曾经最流行的模块打包器是 Browserify，于 2011 年发布，它倡导在前端使用 node.js 风格的 require 语句（这对 npm 成为前端包管理工具的选择是至关重要的）。2015 年左右，webpack 最终成为更为广泛使用的包管理器（React 的流行大大推动了这一进程，它充分利用了 webpack 的各种特性）。

来看一下怎么用 webpack 让上面的 require(‘moment’) 的例子在浏览器中起作用吧。首先，我们需要把 webpack 安装到项目中。Webpack 本身也是一个 npm 包，所以可以使用命令行愉快地安装：

$ npm install webpack --save-dev

注意到 —save-dev 参数 — 把它作为开发环境的依赖，而不是生产环境，因为并不需要把它放到服务器上。你可以在 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"
 },
 "devDependencies": { // 手动加粗
   "webpack": "^3.7.1"
 }
}

现在 webpack 作为一个 node_modules 中的包已经安装好了，可以在命令行中像这样使用 webpack：

$ ./node_modules/.bin/webpack index.js bundle.js

这行命令将会运行位于 node_modules 中的 webpack 工具，它将从 index.js 开始，找到所有require 语句，把它们替换成合适的代码并输出一个单文件叫 bundle.js 。这意味着我们在浏览器中不再需要 index.js，因为它包含非法的 require 语句。而是使用输出的 bundle.js 文件，因此我们应当修改 index.html 文件：



<html lang="en">

  <meta charset="UTF-8">
  </span><span class="pln">JavaScript Example</span><span class="tag">
  
  <script src="bundle.js">


  Hello from HTML!

刷新一下浏览器，一切又都像以前一样可以正常工作啦！

注意到每当我们修改 index.js 后都要运行 webpack 一长串的命令。好烦呀，而且当我们使用到 webpack 更高级的特性时就更烦了（例如使用 generating source maps 帮我们从编译后的代码调试原始的代码）。Webpack 可以从项目文件的根目录中的一个叫做 webpack.config.js的配置文件中读取相应设置，在我们的栗子中，差不多应该配置成这样：

// webpack.config.jsmodule.exports = {
 entry: './index.js',
 output: {
   filename: 'bundle.js'
 }
};

这样每次我们改变 index.js 后，就可以在命令行中运行：

$ ./node_modules/.bin/webpack

我们不需要再特意指出 index.js 和 bundle.js 选项，因为 webpack 已经从 webpack.config.js 中加载得到了。比刚才好了一点，但每次修改代码还要敲命令还是很烦 — 稍后我们会让这个过程再顺利些~

纵观一下，虽然可能看起来变化不大，但这个流程实际上取得了很大的进步。我们不再需要使用额外的标签加载全局变量。任何新的 JavaScript 库都可以使用 require 语句在 JavaScript 文件中引入，而不是在 HTML里加

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

javascript js webpack

Hello from HTML!

Hello from HTML!

Hello from HTML!

Hello from HTML!

相关文章