随时随地一句代码开启一个支持热更新的HTTP开发服务器

    前端入门很简单，一个 .html 文件就可以运行，但是这种基于本地文件打开的 html文件并不是运行在http服务器的，有时候进行开发或者测试一些什么代码需要一个http服务器，例如需要cookie功能，使用ajax读取文件等。

    今天笔者分享一个无需任何配置、随时随地一行代码开启一个能够热更新的HTTP开发服务器的方法，虽然网上有很多教程。但是可能配置和命令比较麻烦，对新手来说不太友好。

    正文开始，首先要安装nodejs，这个很简单就跟安装微信、QQ一样，点击这里根据你的操作系统选择下载安装包安装node。

    然后在任意目录打开命令行，输入以下命令按回车安装一个脚手架工具，因为内置了一个http服务器，所以下载可能会耗费一点时间，请耐心等候。

npm install jet-js-cli -g
           

    只需要下载好这个了之后，所有工作都完成了，在任意目录打开命令行，输入以下命令按回车就可以开启一个支持热更新的HTTP开发服务器，默认入口是index.html文件。使用起来非常简单。不过需要注意的是，如果要想正常使用热更新，请保证当前完整目录中不包含汉字。

jet run
           

    前面都是铺垫，抛砖引玉一下，介绍一下这个 jet-js-cli 是个什么东西，这是一款轻量级渐进式的MVVM框架Jet.js的脚手架工具，使用它你可以快速建立一个Jet项目，jet run 命令只是其中的一个功能。

     jet-js-cli 还有 jet init 命令和 jet build 命令。

以下是详细介绍和使用：

jet-js-cli

theajack

Jet.js 的脚手架工具，帮助您更便捷地使用Jet

Jet 是一个轻量级、渐进式的 JS MVVM框架

1.Installation

1.Use npm to install

npm install jet-js-cli -g
           

下载需要一点时间，请耐心等候

（请使用 

-g

 全局安装，否则后续命令无法执行）

2.Use

选择一个您希望建立项目的目录，命令行运行以下命令：

jet init projectName
           

3.Development

执行上述命令后会下载一个Jet的开发模板和相应开发环境，执行以下命令可以运行这个Jet示例程序：

cd projectName
jet run
           

详细Jet使用教程请参考 Jet API

4.1 Packing Command

使用以下命令打包项目

jet build
           

打包完成后，会在根目录下生成一个

build

文件夹（如已有

build

文件夹，会将旧的打包文件覆盖），将build文件夹中的所有文件复制到您的生产环境中即可运行。

生成

build

文件夹后，可以使用一下命令测试打包之后的项目能否正常工作。

cd build
jet run
           

实际上，您可以使用

jet run

命令在任一目录下启动一个http服务器，入口文件是

index.html

4.2 Packing configuration

在根目录中的

build.config.json

文件中，有以下配置项

...
"jetConfig": {
	"compressHtml": true,
	"compressCss": true,
	"compressJs": true,
	"buildJsWithBabel": false,
	"buildCssWithLess": false,
	"commonLess": false
},
...
           

各项参数含义如下

参数	默认值	描述
compressHtml	true	是否压缩html文件
compressCss	true	是否压缩css文件
compressJs	true	是否压缩js文件
buildJsWithBabel	false	是否将es6转为es5
buildCssWithLess	false	是否将less转为css
commonLess	false	是否将common.css 作为less转译

-备注：若您使用es6开发，虽然支持配置 buildJsWithBabel 后在生产环境中转es5。但在开发环境中，请使用es6兼容性较好的浏览器，例如高版本的Chrome。因为在开发环境中，Jet并没有对es6转es5

.