代码拉取完成，页面将自动刷新
JTaro Module是一款使用ES6模块语法的前端模块管理工具，其本身是为更好地服务JTaro而设计，但并不依赖JTaro，完全可以独立运行。
JTaro Tutorial：https://github.com/chjtx/JTaro-Tutorial
那么，你可以继续往下读了！
npm install -D jtaro-module
node node_modules/jtaro-module/src/server.js，开启本地静态文件服务，默认为3000端口，可自定义端口node node_modules/jtaro-module/src/server.js 3030
node_modules/jtaro-module/src/client.js，在body最后引入入口文件（只要是js文件都可当作入口文件），JTaro Module将会从入口文件开始加载所有依赖文件localhost:3000/index.html，所有js文件都会被拦截，所有符合条件的import/export将会被转换建议使用Visual Studio Code进行开发，可直接在编辑器开启nodejs服务
rollup-plugin-jtaro-module添加到rollup的插件里，打包入口文件node_modules/jtaro-module/src/client.js
node build.js与Rollup.js更多相关内容不在本页范围内，请自行谷歌/百度。
build.js大概代码长这样
var rollup = require('rollup')
var path = require('path')
var jtaroModule = require('rollup-plugin-jtaro-module')
rollup.rollup({
entry: path.resolve('demos/main.js'),
plugins: [jtaroModule({ root: 'demos' })]
}).then(function (bundle) {
bundle.write({
format: 'iife',
dest: 'build/main.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文件
rollup-plugin-paths插件，JTaro Module会自动根据当前文件查找目标文件export * from '../abc.js'
// 1、花括号变量
import { a } from './**.js'
import { a, b, c } from './**.js'
// 2、花括号别名
import { a as apple } from './**.js'
import { a as apple, b as banana } from './**.js'
// 3、默认值赋给变量，相当于`import { default as a } from './**.js'`
import a from './**.js'
// 4、只引入并运行（适用于非ES6模块且有在window域暴露变量的库）
import './**.js'
// 5、获取所有值并赋给变量
import * as a from './**.js'
// 1、var声明（请不要使用let/const声明，ES5不认）
export var a = 'xxx'
// 2、花括号变量
var a = 1, b = 2, c = 3
export { a, b, c }
// 3、花括号别名
export { a as apple, b as banana }
// 4、导出函数
export function a () {
...
}
// 5、导出默认值
export default { a: 1 }
rollup-plugin-jtaro-module Rollup的JTaro Module插件，使Rollup支持引入html和css，上线打包时使用
| 选项 | 默认值 | 说明 |
|---|---|---|
| root | 当前工作目录 | 批定站点根目录，填入相对于工程目录的路径，让JTaro Module能正确处理文件路径 |
server.js同一目录创建jtaro.module.config.js文件node server.js --config=./jtaro.other.config.js
--config选项后面跟的路径是相对server.js的，请用./或../开头rollup-plugin-paths进行别名修改，rollup-plugin-babel进行ES6语法转换等目前已测试通过的rollup插件：
npm i -D rollup-plugin-paths rollup-plugin-babel babel-preset-es2015
// jtaro.module.config.js
var alias = require('rollup-plugin-paths')
var babel = require('rollup-plugin-babel')
module.exports = {
website: '../', // 站点目录，以server.js所在路径为基准
entry: '../demos/main.js', // 入口文件，以server.js所在路径为基准
plugins: [alias({
jquery: './vendors/jquery-2.2.3.min.js' // 以入口文件所在路径为基准
}, babel({
include: '**/a.js', //该路径相对于entry（入口文件）
'presets': [
[
'es2015',
{
'modules': false
}
]
]
})]
}
注意
rollup-plugin-babel必须安装babel-preset-es2015
include选项，否则每个js都会被编译，非常慢JTaro Module只能用于解决js/html/css的模块化，与webpack相比，简直是弱到爆。JTaro Module之所以存在，是因为webpack太过于强大，以至新手根本无法接近，随便抛一个错误足可让我等渣渣通宵达旦。JTaro Module每个文件都与真实文件对应，所有浏览器可捕捉的错误都显而易见，也许错误行号与原文件对不上，ctrl/cmd + f搜索一下就很轻易搜到错误源头。webpack是把牛刀，JTaro Module只是用来削水果的，合不合用就要使用者们自己度量了。
那么为什么要造轮子？
MIT
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型