脚本宝典收集整理的这篇文章主要介绍了

使用hbuild快速构建现代化web应用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">使用hbuild快速构建现代化web应用</h3> <p>Hbuild使用<code>hbuild-cli</code>命令行工具,全局注册后可快速生成项目启动套件。你可以使用Hbuild生成一个h5项目,或者vue项目(默认搭配react-router,可自由选择vuex),或者react项目。该套件包含如下特点:</p> <h3 id="articleHeader1">Features</h3> <ul> <li><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>2 / <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-Router / <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>x (<a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>al)</li> <li>Hot reload<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> s<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>gle-file components</li> <li><a href="http://www.js-code.com/tag/webpack-2" title="Webpack 2" target="_blank">Webpack 2</a></li> <li><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a> (<a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a>)</li> <li>LESS/SASS/Stylus (<a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>al)</li> <li>ejs/mustache/art-template (<a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>al)</li> <li><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> / <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>-Router (optional)</li> <li>zepto</li> <li>au<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>refixer (vue support)</li> <li>mock server</li> <li>esl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a></li> <li>Support <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> build<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>g multi-page applications</li> <li>offline mode support</li> <li><a href="https://github.com/hawx1993/hbuild/blob/master/docs/ChangeLog.md" rel="nofollow noreferrer" target="_blank">file hash</a></li> </ul> <p>其中<a href="https://github.com/hawx1993/hbuild/blob/master/docs/zepto.md" rel="nofollow noreferrer" target="_blank">zepto</a>是默认全局引入的,可直接使用。h5项目可以选择<code>ejs,mustache</code>或<code>art-template</code>模板引擎。 默认支持Babel转码。支持HMR。支持<a href="https://github.com/hawx1993/hbuild/blob/master/docs/ChangeLog.md" rel="nofollow noreferrer" target="_blank">文件指纹</a>。</p> <p>vue项目默认支持vue-router,react项目默认支持react-router</p> <h3 id="articleHeader2">Get Started</h3> <p>You'd better have <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> &gt;=6 and npm &gt;=3 and gulp &gt;=3.9 inst<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a>ed:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm install -g hbuild-cli $ h init new-project # edit files and start developing $ npm run dev # bundle all scripts and styles for production use $ npm run prod # lint your js code $ npm run eslint" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ npm inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> -g hbuild-cli $ h init <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>-project <span class="hljs-comment"># edit files and start developing</span> $ npm run dev <span class="hljs-comment"># bundle all scripts and styles <a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a> production use</span> $ npm run prod <span class="hljs-comment"># l<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a> your js code</span> $ npm run eslint</code></pre> <h3 id="articleHeader3">Local <a href="http://www.js-code.com/tag/template" title="Template" target="_blank">Template</a>s</h3> <p>when you clone <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a> project,you can use a template on your local file system:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ git clone git@github.com:hawx1993/hbuild.git $ h init ./hbuild new-project" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">$ git <span class="hljs-built_in">clone</span> git@github.com:hawx1993/hbuild.git $ h init ./hbuild new-project</code></pre> <h3 id="articleHeader4">命令</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm run dev;//本地开发模式,连接mock数据 $ npm run dev-daily;//本地开发模式,连接daily日常环境数据 $ npm run dev-pre;//本地开发模式,连接预发环境数据 $ npm run daily;//线上日常构建模式,连接daily日常环境数据 $ npm run pre;//线上预发构建模式,连接预发环境数据 $ npm run prod;//线上构建模式,连接线上环境数据 $ npm run eslint;//js代码审查,默认检查除lib文件夹下的js代码" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code>$ npm run dev;<span class="hljs-regexp">//</span>本地开发模式,连接mock数据 $ npm run dev-daily;<span class="hljs-regexp">//</span>本地开发模式,连接daily日常环境数据 $ npm run dev-pre;<span class="hljs-regexp">//</span>本地开发模式,连接预发环境数据 $ npm run daily;<span class="hljs-regexp">//</span>线上日常构建模式,连接daily日常环境数据 $ npm run pre;<span class="hljs-regexp">//</span>线上预发构建模式,连接预发环境数据 $ npm run prod;<span class="hljs-regexp">//</span>线上构建模式,连接线上环境数据 $ npm run eslint;<span class="hljs-regexp">//js</span>代码审查,默认检查除lib文件夹下的js代码</code></pre> <h3 id="articleHeader5">编译</h3> <p>1.js代码默认采用Babel编译,gulp + webpack打包构建。</p> <p>2.编译后的html文件默认输出到<code>build/pages</code>目录下,html文件名采用其在<code>src/pages</code>下的父级目录的文件名</p> <p>3.编译后的静态资源文件(图片,字体,js文件等)存放到<code>build/<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a></code>目录下,编译支持文件hash,解决缓存问题</p> <p>4.支持代码热替换,热替换失败会自动刷新整个页面</p> <p>5.开发模式不对代码进行压缩,source<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a> 只针对非开发模式有效(not dev)</p> <p>6.支持图片压缩</p> <h3 id="articleHeader6"><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>和模板引擎</h3> <p>1.h5项目支持 ejs ,mustache和<code>art-template</code>模板引擎,默认支持<code>zepto</code></p> <p>2.非本地开发环境,html,js和css代码会被压缩</p> <p>3.当你在pages下新建一个目录时,html文件需要手动配置一下静态资源的引用,例如在index目录下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script src=&quot;$$_CDNPATH_$$/index/index.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;">&lt;script src=<span class="hljs-string">"$$_CDNPATH_$$/index/index.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <h3 id="articleHeader7"><a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>和预处理器</h3> <p>1.支持css预处理器LESS、SASS和stylus (optional);</p> <p>2.默认采用<code>css-in-js</code>的方式,可在<code>hbuild.config.js</code>文件中配置是否单独提取css,提取出的css文件名称默认为:<code>[<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>].css</code>,<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>为src下<code>less/scss/stylus</code>文件名</p> <p>3.开启提取css文件,需要在<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>中引入,引入方式同js</p> <p>4.支持 屏幕适配方案,采用<code>media-query+rem</code>的方式,默认在<code>common.less</code>文件中</p> <p>5.支持postcss和<code>au<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>refixer</code></p> <h3 id="articleHeader8">代码检查</h3> <p>1.<code>npm run esl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a></code> 支持vue单文件组件,支持<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>语法检查</p> <h3 id="articleHeader9">其他</h3> <ul> <li>mock:mock 数据只需要接口URI路径和mock目录保持一致即可</li> <li>接口:接口如需根据环境来替换,需在<code>hbuild.config.js</code>文件和<code>common/js/config</code>文件进行配置</li> <li>支持多入口文件,可在pages下新建目录,文件名需以index开头</li> <li>字符串替换:<code>$$_CDNPATH_$$</code>会被编译替换为<code>build/<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a>/hash</code>目录,<code>$$_STATICPATH_$$</code>会被替换为<code>build/<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a>/hash/assets</code> </li> <li>入口文件:脚手架默认会读取pages目录下的index开头的js文件为入口文件,名称是写死的</li> <li>修改默认文件夹的名称,需要在<code>hbuild.config.js</code>文件就对应文件变量做修改</li> </ul> <h3 id="articleHeader10">目录结构</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=". ├── README.md ├── build # 构建工具目录 │ └── gulpfile.js # gulp文件 │ └── postcss.config.js # postcss配置文件 │ └── util.js # gulp脚手架工具方法 │ └── hbuild.config.js # 脚手架配置文件 ├── mock # mock数据目录,保持和接口一样的路径即可 │ └── h5 ├── package.json ├── src # 源文件 │ ├── assets # 静态资源目录,存放图片或字体 │ │ └── logo.ico │ ├── common # 共用代码目录,css目录存放公用css部分,js同理 │ │ ├── css │ │ │ ├── common.less │ │ │ └── common.scss │ │ └── js │ │ ├── api.js # api文件 │ │ ├── config.js # 配置文件 │ │ └── util.js # 工具函数文件,可将公用方法存放于此 │ ├── components # 组件目录 │ │ ├── counter # 计数器vue组件 │ │ │ └── index.vue │ │ ├── index # vue组件的入口文件 │ │ │ └── index.vue │ │ ├── meta # h5 meta头部信息模块 │ │ │ └── index.html │ │ ├── router # vue路由模块 │ │ │ └── router.js │ │ └── store # vuex store模块 │ │ └── store.js │ ├── lib # 第三方库 │ └── pages # 页面 │ └── index # 首页目录,可在pages目录下新建多个目录结构,作为多入口文件 │ ├── index.html │ ├── index.js # index.js/index.jsx文件为webpack的入口文件 │ ├── index.jsx │ ├── index.less # 样式文件在js文件中引入,可设置是否提取出css文件 │ ├── index.scss │ └── module # 页面模板模块,可在index.js/jsx文件引入该模块文件 │ ├── main.jsx │ └── main.tpl.html └── yarn.lock" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">. ├── README.md ├── build <span class="hljs-comment"># 构建工具目录</span> │ └── gulpfile.js <span class="hljs-comment"># gulp文件</span> │ └── postcss.config.js <span class="hljs-comment"># postcss配置文件</span> │ └── util.js <span class="hljs-comment"># gulp脚手架工具方法</span> │ └── hbuild.config.js <span class="hljs-comment"># 脚手架配置文件</span> ├── mock <span class="hljs-comment"># mock数据目录,保持和接口一样的路径即可</span> │ └── h5 ├── <a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>.json ├── src <span class="hljs-comment"># 源文件 </span> │ ├── assets <span class="hljs-comment"># 静态资源目录,存放图片或字体</span> │ │ └── logo.ico │ ├── common <span class="hljs-comment"># 共用代码目录,css目录存放公用css部分,js同理</span> │ │ ├── css │ │ │ ├── common.less │ │ │ └── common.scss │ │ └── js │ │ ├── api.js <span class="hljs-comment"># api文件</span> │ │ ├── config.js <span class="hljs-comment"># 配置文件</span> │ │ └── util.js <span class="hljs-comment"># 工具函数文件,可将公用方法存放于此</span> │ ├── components <span class="hljs-comment"># 组件目录</span> │ │ ├── counter <span class="hljs-comment"># 计数器vue组件</span> │ │ │ └── index.vue │ │ ├── index <span class="hljs-comment"># vue组件的入口文件</span> │ │ │ └── index.vue │ │ ├── meta <span class="hljs-comment"># h5 meta头部信息模块</span> │ │ │ └── index.html │ │ ├── router <span class="hljs-comment"># vue路由模块</span> │ │ │ └── router.js │ │ └── store <span class="hljs-comment"># vuex store模块</span> │ │ └── store.js │ ├── lib <span class="hljs-comment"># 第三方库 </span> │ └── pages <span class="hljs-comment"># 页面 </span> │ └── index <span class="hljs-comment"># 首页目录,可在pages目录下新建多个目录结构,作为多入口文件</span> │ ├── index.html │ ├── index.js <span class="hljs-comment"># index.js/index.jsx文件为webpack的入口文件</span> │ ├── index.jsx │ ├── index.less <span class="hljs-comment"># 样式文件在js文件中引入,可设置是否提取出css文件 </span> │ ├── index.scss │ └── module <span class="hljs-comment"># 页面模板模块,可在index.js/jsx文件引入该模块文件</span> │ ├── main.jsx │ └── main.tpl.html └── yarn.lock</code></pre> <h3 id="articleHeader11">ChangeLog</h3> <p><a href="https://github.com/hawx1993/hbuild/blob/master/docs/ChangeLog.md" rel="nofollow noreferrer" target="_blank">changelog</a></p> <h3 id="articleHeader12">License</h3> <p>MIT © <a href="https://github.com/hawx1993" rel="nofollow noreferrer" target="_blank">hawx1993</a></p> <h3 id="articleHeader13">项目地址</h3> <p><a href="https://github.com/hawx1993/hbuild" rel="nofollow noreferrer" target="_blank">https://github.com/hawx1993/h...</a> 欢迎star or issue</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

使用hbuild快速构建现代化web应用

全部内容,希望文章能够帮你解决

使用hbuild快速构建现代化web应用

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过