JTaro Module 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
JTaro Module 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2017-05-24

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文件

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

JTaro Module 的相关资讯

还没有任何资讯

JTaro Module 的相关博客

module_init和module_exit

转自:http://blog.csdn.net/hudashi/article/details/7080071 本文参照:http://blog.163.com/xinbuqianjin@126/blog/stati...

Module

Module 模块 在Python中:一个.py文件就称之为一个模块(Module) 分类 但其实import加载的模块分为四个通用类别: 内置标准模块(...

go module

前言 go 1.5 引进了vendor管理工程依赖包,但是vendor的存放路径是在GOPATH底下,另外每个依赖还可以有自己的vendor,通常会弄...

module_param和module_param_array用法

如何向模块传递参数? Linux kernel 提供了一个简单的框架。利用module_param和module_param_arra来实现。 1. module_param(...

原生ES-Module <script type="module" >

首先是各大浏览器从何时开始支持module的: Safari 10.1 Chrome 61 Firefox 54 (有可能需要你在about:config页面设置启用dom...

program与module

program,各方面与module都类似,其中声明的变量在program中都可见,   生命周期也是static类型的, program的结束,也是需...

module: command not found

转载请注明文章出处:module: command not found module是*nix系统上加载/管理模块的命令,然而大多数发行版上并未默认安装,...

Go 1.11 的Module

A module is a collection of related Go packages. Modules are the unit of source code interchange and versioning. The ...

JTaro Module 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
1 收藏
分享
返回顶部
顶部