JTaro Module是一款使用ES6模块语法的前端模块管理工具,其本身是为更好地服务JTaro而设计,但并不依赖JTaro,完全可以独立运行。
如果你想使用ES6模块语法管理代码,又不想使用webpack这个重型工具
如果你只是想简简单单的写个js、html、css,不需要typescript、postcss等高级工具
如果你想开发时所见到的错误就像使用script标签引入的脚本一样清晰
如果你想上线代码只打包成一个或几个文件以减少文件体积和连接数
那么,你可以继续往下读了!
轻盈易用,几个文件,数百行代码,只需要开启其nodejs服务即可使用ES6模块语法编写代码,无需Babel转译
方便排错,浏览器展示代码与本地js文件一一对应,错误行号一目了然
低耗高能,只需要安装nodejs 6以上版本即可运行,在3000元windows机上跑也是扛扛的
代码精简,上线代码使用Rollup.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时,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文件的内容以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
主要内容:内核模块保存位置与模块保存文件,内核模块的查看,内核模块的添加与删除Linux 的内核会在启动过程中自动检验和加载硬件与文件系统的驱动。一般这些驱动都是用模块的形式加载的,使用模块的形式保存驱动,可以不直接把驱动放入内核,有利于控制内核大小。 模块的全称是 动态可加载内核模块,它是具有独立功能的程序,可以被单独编译,但不能独立运行。模块是为内核或其他模块提供功能的代码集合。这些模块可以是 Linux 源码中自带的,也可以是由硬件厂商开发的(可以想象成驱动)。不过内