前端入门很简单,一个 .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
.
本文介绍了一种简单方法,只需一行代码即可在任意目录下启动一个支持热更新的HTTP开发服务器,适用于前端开发者的快速测试与开发。通过安装jet-js-cli工具,用户可以轻松创建Jet.js项目,并利用jetrun命令快速部署开发环境。
9834

被折叠的 条评论
为什么被折叠?



