项目推荐 | 遵循es6模块规范的前端模块管理工具

前言

如果你想使用ES6模块语法管理代码，又不想使用webpack这个重型工具；

如果你只是想简简单单的写个js、html、css，不需要typescript、postcss等高级工具；

如果你想开发时所见到的错误就像使用script标签引入的脚本一样清晰；

如果你想上线代码只打包成一个或几个文件以减少文件体积和连接数；

那么，你可以继续往下读了。

特点

1、轻盈易用，几个文件，数百行代码，只需要开启其nodejs服务即可使用ES6模块语法编写代码，无需Babel转译；

2、方便排错，浏览器展示代码与本地js文件一一对应，错误行号一目了然；

3、低耗高能，只需要安装nodejs 6以上版本即可运行，在3000元windows机上跑也是扛扛的；

4、代码精简，上线代码使用Rollup.js打包，除寥寥几行用于处理样式的代码外，不带任何模块管理的代码。

示例

运行示例

开始使用

开发模式：

1、安装npm install -D jtaro-module；

2、在自己的项目目录里使用命令行（终端）运行node node_modules

/jtaro-module/src/server.js，开启本地静态文件服务，默认为3000端口，可自定义端口node node_modules/jtaro-module/src/server.js 3030；

3、在index.html的head引入node_modules/jtaro-module/src/client.js，在body最后引入入口文件（只要是js文件都可当作入口文件），JTaro Module将会从入口文件开始加载所有依赖文件；

4、在浏览器上运行localhost:3000/index.html，所有js文件都会被拦截，所有符合条件的import/export将会被转换。

建议使用Visual Studio Code进行开发，可直接在编辑器开启nodejs服务。

上线模式：

1、安装rollup、引入rollup-plugin-jtaro-module添加到rollup的插件里，打包入口文件；

2、拷贝index.html到build/并删除拷贝的index.html里的node_modules/jtaro-module/src/client.js；

3、node build.js。

与Rollup.js更多相关内容不在本页范围内，请自行谷歌/百度。

build.js大概代码长这样。

JTaro Module 运行原理

处理JS

本地开启nodejs静态服务，拦截所有js文件，检测文件内容，将import/export解释成ES5可执行的方法，再返回给浏览器。

例：

浏览器接收到的内容为：

处理html

当引入的文件为html时，JTaro Module会将html里的style在head里生成样式表，其余内容以字符串形式返回。JTaro是基于Vue开发的，因此JTaro Module的html内容也应该遵循Vue的模板规则，最外层只有一个dom元素。另外，html文件里只允许一个style标签。

推荐：

不推荐：

JTaro Module会将style和div(dom元素)分离，并在第一个div加上与style对应的标识，以达到作用域限定的目的。如果你要给第一个div加样式，只需要在{}里写样式，前面不需要任何选择器。如果某些编辑器对{}发出警告，看着不爽，可以这样写this {}，this表示第一个div。

a.html：

a.js：

运行结果：

处理css

直接将css文件的内容以style标签的形式在head创建，不会额外加任何标记。

Tips：创建局部样式请在html文件里使用style，创建全局样式，请使用css文件。

注意事项

1、目前只在chrome浏览器通过测试，而且将来也不太可能会去兼容其它浏览器。是的，没看错，对非chrome浏览器不做兼容。上线部署的时候将会移除几乎所有JTaro Module的代码，因此，只需要保证在chrome浏览器上开发不出问题就够了。

2、所有import的路径都是相对当前文件的，除非使用rollup-plugin-paths插件，JTaro Module会自动根据当前文件查找目标文件。

3、a.js引入b.js，b.js引入a.js这类循环引入不会重复加载，但代码可能不会按预期的那样执行。

4、import/export必须独立成行，即同一行不能出现两个import/export。

5import的文件必须加后缀，目前只支持js/html/css三种后缀文件。

6、入口文件不应该有export。

7、除以下5种import、5种export语法外的ES6模块语法都不会被解释到，例：不支持export * from '../abc.js'。

https://gitee.com/chenjianlong/JTaro-Module