当前位置: 首页 > 软件库 > 应用工具 > >

JTaro Module

前端模块管理工具
授权协议 MIT
开发语言 JavaScript
所属分类 应用工具
软件类型 开源软件
地区 国产
投 递 者 葛意远
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

  • module概述 module 是 *nix 系统上加载/管理模块的命令。 module安装 大多数发行版上并未默认安装,运行该命令则会出现如下错误: module: command not found。 需手动执行安装命令,安装软件包 environment-modules: For CentOS: [root@localhost ~]# dnf install environment-modu

  • 问题背景:在eclipse中启动正常,切换到idea启动无报错,但访问出现404异常。 问题排查:首先在configPlugin或者configConstant配置中设置断点。发现执行 JFinal.start(“src/main/webapp”, 80, “/”);后并未进入configPlugin或者configConstant. 由此可判断执行完start后,项目未能正确的加载到web.xm

  • 如题,我们知道,android stuido 中一个project中可以包含很多个module。我查了一下,主要是包含了android application module,android library module,java library module这三种module。 我现在的理解是android application module以作为一个可以运行的应用,而android libra

  • Java Platform Module System JSR (376) JSR-000376 Java Platform Module System Final Release Specification Java Modules Tutorial - HowToDoInJava Introduction to Java Platform Module System Project Jigsa

 相关资料
  • 一、简介 V9系统可以自定义开发模块(详情请参考V9二次开发指南)。可对模块的安装,卸载等管理。 二、功能演示 1.安装 将已经创建好的模块放在指定位置,运行后台后,在“模块管理”处会找到你创建的模块。如下图: 如模块配置和代码无问题,系统将提示安装成功,否则提示错误。安装成功后你就可以使用该模块了(详情请参考V9二次开发指南)。 2.卸载 安装后的模块如果你不需要,可进行卸载。如下图:

  • 一、简介   “模块管理"用于用户管理系统自带或者用户自定义开发模块的设置以及配置的等。这里且说系统自带。 二、功能演示 表单向导 广告 新闻心情 短消息 投票 友情链接 评论 公告 模块管理 全站搜素 数据源 点评模块 物流模块 在线充值 短信平台 外部数据导入 手机门户

  • 用户管理 当多级审核关闭后系统并不会自动将角色为执行人的用户重置角色,请自行重置相应用户角色。 数据库管理 所有添加的数据源应在添加之前点击测试连接按钮进行连接性测试,保证连接性。 数据源分为查询数据源/非查询数据源/读写数据源。查询数据源仅会出现在细粒度权限的查询数据源范围内。非查询数据源同理。(对于查询与执行数据源应拆分为二,保障线上执行数据源不会因为查询慢sql影响业务)默认为读写数据源。此

  • 发一个项目当中管理UIAlerView,相当好用的模块。 可以无缝整合到当前项目中,不需要其他依赖。 在开发过程中遇见过这样的问题: 比如说 当前屏幕已有一个UIAlerView提示, 不希望其他的UIAlerView 提示覆盖, 而是等当前的UIAlerView提示处理完,在去显示其他的信息。 这里封装了一个 UIAlerView 管理器, 管理器是用队列实现的。 可以将自己的UIAlerVie

  • 本文向大家介绍如何理解前端模块化?相关面试题,主要包含被问及如何理解前端模块化?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 前端模块化就是复杂的文件编程一个一个独立的模块,比如js文件等等,分成独立的模块有利于重用(复用性)和维护(版本迭代),这样会引来模块之间相互依赖的问题,所以有了commonJS规范,AMD,CMD规范等等,以及用于js打包(编译等处理)的工具webpack

  • 所有发布在npm上的模块,都可以在自己的npm主页上看到。 但是如果想要更为直观的管理,可以通过一个名为badgeboard的工具来浏览。 对于npm的模块,已经有很多成熟的服务,方便开发者了解自己的模块状态。 正如上图中所示,常用的服务有: 持续集成:travis 测试覆盖:coveralls 查看模块依赖:david-dm 这些工具都可以非常好的帮助你管理自己的npm模块、了解模块的状态。 例

  • 本文向大家介绍使用mini-define实现前端代码的模块化管理,包括了使用mini-define实现前端代码的模块化管理的使用技巧和注意事项,需要的朋友参考一下 mini-define 依据require实现的简易的前端模块化框架。如果你不想花时间学习require.js,也不想翻看长篇的cmd/amd规范,那么这个mini-define就是你不错的选择。如果你之前用过sea.js或requir

  • 前端工作版块 可以列出很多寻找技术工作的方法. 下面的有限列表是和寻找一份具体的前端工作最相关的资源: frontenddeveloperjob.com authenticjobs.com weworkremotely.com jobs.github.com careers.stackoverflow.com angularjobs.com jobs.emberjs.com jobs.jsninj