JTaro Module - 前端模块管理工具

MIT
JavaScript
跨平台
2017-05-24
BarZu

JTaro Module是一款使用ES6模块语法的前端模块管理工具,其本身是为更好地服务JTaro而设计,但并不依赖JTaro,完全可以独立运行。

前言

  • 如果你想使用ES6模块语法管理代码,又不想使用webpack这个重型工具

  • 如果你只是想简简单单的写个js、html、css,不需要typescript、postcss等高级工具

  • 如果你想开发时所见到的错误就像使用script标签引入的脚本一样清晰

  • 如果你想上线代码只打包成一个或几个文件以减少文件体积和连接数

那么,你可以继续往下读了!

特点

  • 轻盈易用,几个文件,数百行代码,只需要开启其nodejs服务即可使用ES6模块语法编写代码,无需Babel转译

  • 方便排错,浏览器展示代码与本地js文件一一对应,错误行号一目了然

  • 低耗高能,只需要安装nodejs 6以上版本即可运行,在3000元windows机上跑也是扛扛的

  • 代码精简,上线代码使用Rollup.js打包,除寥寥几行用于处理样式的代码外,不带任何模块管理的代码

JTaro Module 运行原理

处理js

本地开启nodejs静态服务,拦截所有js文件,检测文件内容,将import/export解释成ES5可执行的方法,再返回给浏览器

例:

// main.js
import { a } from './a.js'

console.log(a)

export default {
  a: a
}

浏览器接收到的内容为:

(function (f) {
  JTaroAssets['/main.js'] = 1
  var g = {count:1}
  g.callback = function () { f.apply(null, [
    JTaroModules['/a.js'].default
  ]) }
  JTaroLoader.import('./a.js', g)
})(function (a) {
// main.js

console.log(a)

JTaroModules['/main.js'].default = {
  a: a
}
})

处理html

当引入的文件为html时,JTaro Module会将html里的style在head里生成样式表,其余内容以字符串形式返回。JTaro是基于Vue开发的,因此JTaro Module的html内容也应该遵循Vue的模板规则,最外层只有一个dom元素。另外,html文件里只允许一个style标签

推荐

<style>
body {}
</style>
<div>
  <p>最外层只有一个div</p>
</div>

不推荐

<style>
body {}
</style>
<div>
  <p>最外层只有一个div</p>
</div>
<div>
  我是最外层的第二个div
</div>

JTaro Module会将style和div(dom元素)分离,并在第一个div加上与style对应的标识,以达到作用域限定的目的。如果你要给第一个div加样式,只需要在{}里写样式,前面不需要任何选择器。如果某些编辑器对{}发出警告,看着不爽,可以这样写this {},this表示第一个div

像这样子

a.html

<style>
h1 {font-size:32px;}
{background: #ddd;} /* 给顶层div加样式 */
this {background: #ddd;} /* 给顶层div加样式,防止编辑器发出警告 */
this.abc {color: #333;}
this#efg {float: left;}
</style>
<div class="abc" id="efg">
  <h1>Hello JTaro Module</h1>
</div>

a.js

import a from './a.html'
document.body.innerHTML = a

运行结果

<html>
  <head>
    <style id="jtaro_style_a">
    [jtaro_a] h1 {font-size:32px;}
    [jtaro_a] {background: #ddd;}
    [jtaro_a].abc {color: #333;}
    [jtaro_a]#efg {float: left;}
    </style>
  </head>
  <body>
    <div jtaro_a class="abc" id="efg">
      <h1>Hello JTaro Module</h1>
    </div>
  </body>
</html>

处理css

直接将css文件的内容以style标签的形式在head创建,不会额外加任何标记

tips:创建局部样式请在html文件里使用style,创建全局样式,请使用css文件

加载中

评论(0)

暂无评论

暂无资讯

暂无讨论

nginx的ngx_module_s 模块

nginx的ngx_module_s 是记录模块配置和实例化结构,ngx_command_s模块记录的是记录传入指令的结构

04/26 08:30
68
0
Hibernate的模块结构

从3.3版本开始, Hibernate开始以Maven为基础进行项目构建,相应的,它将工程查封成了一些独立的Module,从而方便用户构建最小化的jar包依赖。下面是Hibernate3.5.2的pom文件中描述的所有核心...

2014/10/12 11:47
8
0
Nginx 安装参数学习

Nginx 安装的参数

2015/05/06 23:54
14
0
安装nginx1.15.0

安装完后在解压目录执行: 第一步: ./configure --user=nobody --group=nobody --prefix=/usr/local/nginx \ --with-select_module --with-poll_module \ --with-threads --with-file-aio ...

07/31 14:00
26
0
module_init和module_exit

转自:http://blog.csdn.net/hudashi/article/details/7080071 本文参照:http://blog.163.com/xinbuqianjin@126/blog/static/167563447201010221231507/ http://www.360doc.com/content/11...

2012/03/12 23:48
597
0
Module Dependency Tree View

The Module Dependency Tree View displays a hierarchical view of all the modules' dependencies. There are several ways a module can be a dependency of another module. For more in...

2013/01/14 10:03
27
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部