JTaro Module是一款使用ES6模块语法的前端模块管理工具,其本身是为更好地服务JTaro而设计,但并不依赖JTaro,完全可以独立运行。
那么,你可以继续往下读了!
运行示例
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加样式,防止编辑器发出警告 */ </style> <div> <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;} </style> </head> <body> <div jtaro_a> <h1>Hello JTaro Module</h1> </div> </body> </html>
直接将css文件的内容以style标签的形式在head创建,不会额外加任何标记
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的JTaro Module插件,使Rollup支持引入html和css
选项 | 默认值 | 说明 |
---|---|---|
root | 当前工作目录 | 批定站点根目录,让JTaro Module能正确处理文件路径 |
JTaro Module只能用于解决js/html/css的模块化,对于引入es6/typescript/less/sass/postCss等可谓是爱莫能及,与webpack相比,简直是弱到爆。JTaro Module之所以存在,是因为webpack太过于强大,以至新手根本无法接近,随便抛一个错误足可让我等渣渣通宵达旦。JTaro Module每个文件都与真实文件对应,所有浏览器可捕捉的错误都显而易见,也许错误行号与原文件对不上, ctrl/cmd + f
搜索一下就很轻易搜到错误源头。webpack是把牛刀,JTaro Module只是用来削水果的,合不合用就要使用者们自己度量了。
MIT