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