代码拉取完成，页面将自动刷新
让java web项目支持JavaScript ES6+、.scss、.less、.vue、.jsx、*.ts等。
当前最新版本为 1.3.5
非root用户可以使用以下方式：
export LD_PRELOAD=/.../libstdc++.so.6.0.28
<dependency>
<groupId>com.xishankeji</groupId>
<artifactId>xsloader4j-spring-boot-embed-starter</artifactId>
<version>1.3.5</version>
</dependency>
<dependency>
<groupId>com.xishankeji</groupId>
<artifactId>xsloader4j-core</artifactId>
<version>1.3.5</version>
</dependency>
在资源目录（如src/main/resources）下新建xsloader4j.properties：
xsloader.es6.polyfill=true
xsloader.es6.debug=true
xsloader.es6.name=default
xsloader.sourcemap=true
xsloader.es6.dealt.ignores=
xsloader.es6.dealt.static=
xsloader.es6.extensions=
xsloader.es6.detectBrowser=true
xsloader.es6.v8flags=
xsloader.conf.properties.staticUrlPrefix=https://xxxxx.cn/xxx
xsloader.conf.properties.prop1=xxx
xsloader.htmv.enable=false
xsloader.htmv.paths[0]=* to /WEB-INF/htmv/default.html
xsloader.htmv.paths[1]=/mobile/ to /WEB-INF/htmv/mobile.html
xsloader.react.autojs=true
xsloader.react.product=true
xsloader.htmr.paths[0]=* to /WEB-INF/htmr/default.html
xsloader.htmr.paths[1]=/mobile/ to /WEB-INF/htmr/mobile.html
xsloader.ctrl.enable=false
xsloader.embed.enable=true
#{propName}进行引用。classpath:开头表示资源目录，其他表示在web路径下（通过servletContext.getRealPath获取）,表示需要前置逗号；//!embed开关。在资源目录（如src/main/resources）下新建xsloader-conf.js,参考内容如下：
#{propName}引用配置参数，contextPath默认为当前servlet的context path参数。{
"properties":{
"contextPath":"#{contextPath}",
"staticUrlPrefix":"#{staticUrlPrefix}",
"libReplace":{
"libxs/":{
"replace":"${staticUrlPrefix}/libxs/"
},
"lib/":{
"replace":"${staticUrlPrefix}/lib/"
},
"libui/":{
"replace":"${staticUrlPrefix}/libui/"
}
}
},
"main":{
getPath:function(dataMain){
return dataMain||"./es-main/{name}.js";
},
"before":function(){
console.log("before:" + name);
},
"after":function(){
console.log("after:" + name);
}
},
"chooseLoader":function(localConfig){
var path=this.getPagePath();
if(xsloader.startsWith(path,"/test1/")){
return "test1";
}else if(xsloader.startsWith(path,"/test2-no-vue/")){
return "test2-no-vue";
}else{
return "test1";
}
},
"loader":{
"test1":{
"baseUrl":"${contextPath}/",
"modulePrefix":"$[libReplace]",
"urlArgs":{
"*[${contextPath}/":"v=20200130-02",
"*[libxs/":"v=20200129-3",
"*[lib/":"v=190109-26",
"*[libui/":"v=190109-26"
},
"paths":{
"vue":"static/vue/vue.min.js"
},
"deps":{
"*":"vue"//当有vue组件或jsx语法时，一定要先加载vue模块
}
},
"test2-no-vue":{
"baseUrl":"${contextPath}/",
"modulePrefix":"$[libReplace]",
"urlArgs":{
"*[${contextPath}/":"v=20200130-02",
"*[libxs/":"v=20200129-3",
"*[lib/":"v=190109-26",
"*[libui/":"v=190109-26"
},
"paths":{
},
"deps":{
}
}
},
"getPagePath":function(){
var path=location.pathname.substring(this.properties.contextPath.length);
return path;
},
"sporter":"${contextPath}/",
"fromPath":function(path){
return location.protocol+"//"+location.host+this.sporter+path;
},
"beforeDealProperties":function(){
}
}
<script src="../xsloader.js" data-conf2="./xsloader.conf" async="async" type="text/javascript" charset="utf-8"></script>
data-conf2="./xsloader.conf"
详细例子可以参考demo-servlet项目
demo-servlet为普通servlet项目，执行jetty:run或tomcat7:run的maven插件，可运行demo。 访问地址：http://localhost:8070/index.html
demo-spring-boot-servlet为spring boot servlet项目
demo-spring-boot-main为spring boot main函数项目（普通java项目）
test1目录结构：
/test1/
/test1/index.html
/test1/es-main/index.js
/test1/es-main/vue/comp1.vue
/test1/es-main/jsx/comp2.jsx
<!DOCTYPE html>
<html>
<head>
<title>测试1</title>
<meta charset="UTF-8">
<!--引入xsloader脚本-->
<script src="../xsloader.js" data-conf2="./xsloader.conf" async="async" type="text/javascript"
charset="utf-8"></script>
</head>
<body>
<div id="vue-app">
</div>
<script id="app-template" type="text/x-template">
<div style="text-align:center;">
<comp1/>
<comp2/>
<jsx :x="getVnode" id="123" :name="'name'" @click="onClickVnodex" class="test-class"/>
</div>
</script>
</body>
</html>
<template>
<div>
<h1 :class="{...classNames}">{{info}}</h1>
<p>$thiz.getUrl():<span style="color:gray;">{{$thiz.getUrl()}}</span></p>
<p>$thiz.getUrl("../index.js"):<span style="color:gray;">{{$thiz.getUrl("../index.js")}}</span></p>
</div>
</template>
<script>
export default{
data(){
return {
info:"HelloWorld",
classNames:{
teatA:true,
testB:true,
}
}
}
}
</script>
<style lang="scss" scoped="true">
&{
margin:2em;
}
</style>
export default {
render(){
return (
<div
style={{
margin:"2em auto"
}}>
<p>这是一个jsx语法的组件</p>
</div>)
}
}
import "css!static/test.scss";//不是以“.”开头的路径相对于baseUrl
import Vue from "vue";
import comp1 from "./vue/comp1.vue";//需要加入文件后缀，当前目录需要用"./"、否则是相对于baseUrl
console.log(thiz.getUrl());//http://localhost:8070/test1/es-main/index.js?v=20200130-02
console.log(thiz.getUrl("./lib/other.js"));//http://localhost:8070/test1/es-main/lib/other.js?v=20200130-02
new Vue({
el:"#vue-app",
template:"#app-template",
methods:{
getVnode(){
return (<p on={{click:this.onClickp}}>
来自函数
</p>);
},
onClickVnodex($event){
alert("onClickVnodex:"+$event);
},
onClickp($event){
alert("onClickp:"+$event);
}
},
components:{
comp1,
comp2:()=>import("./jsx/comp2.jsx")//支持异步加载
}
});
pom.xml的plugins里排除windows与mac的j2v8依赖包：
<build>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
<configuration>
<packagingExcludes>
<!--排除j2v8 windows与mac下的依赖包，默认打包后在linux下运行、减小压缩包-->
WEB-INF/lib/j2v8_win**.jar,WEB-INF/lib/j2v8_macosx**.jar,
</packagingExcludes>
</configuration>
</plugin>
</plugins>
</build>
<dependency>
<groupId>com.eclipsesource.j2v8</groupId>
<artifactId>j2v8_macosx_x86_64</artifactId>
<version>4.6.0</version>
</dependency>
demo-servlet
注意:import其他组件或模块，可省略的后缀见xsloader.es6.extensions配置<jsx>组件（需要全局配置vue模块），通过x属性（返回jsx对象的函数或jsx对象，支持字符串等内容）可以直接显示编译后的jsx对象<div>
<jsx :x="xxx" />
</div>
let ...
import ...
export ...
const ...
thiz变量指向当前模块，更多请见xsloader的this
{
"paths": {
"vue": "你的vue2的路径/vue.min.js"
},
"deps": {
"*": "vue"
//当有vue组件、jsx语法或htmv时，一定要先加载vue模块
}
}
<template>
</template>
<script>
</script>
<style lang="scss" scoped="true">
</style>
return (`\jsx
<div>HelloJSX</div>
\jsx`)
$keepVueStyle属性，默认为false，表示销毁时、对应的style也会被销毁。$destroyVueStyle()函数，用于销毁style；当使用Vue的<transition>过渡动画时，可设置其包裹的组件的$keepVueStyle=true
，在动画结束后手动调用此函数销毁style。1、注意这里scoped为true时，只是在根元素上添加一个随机的class。
2、<style>标签支持多个
{
"paths": {
"vue": "你的vue2的路径/vue.min.js"
},
"deps": {
"*": "vue"
//当有vue组件、jsx语法或htmv时，一定要先加载vue模块
}
}
<!--settings:
{
title:"文档标题",
noLoadingMask:false,
heads:['<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">']
}
-->
<template>
</template>
<script lang>
</script>
<style lang="scss" scoped="true">
</style>
script的lang支持typescript或ts
loading-mask的加载框。<head>标签中{
"paths": {
"vue": "你的vue2的路径/vue.min.js"
},
"deps": {
"*": "vue"
//当有vue组件、jsx语法或htmv时，一定要先加载vue模块
}
}
xsloader.htmv.enable=true来启用htmv<template>,html注释<!---->后面需有换行，<style>标签前面需要有换行。script标签，style标签必须放在js代码后面，js代码里不能出现<style>标签与html注释<!---->。<!--settings:
{
title:"文档标题",
heads:['<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">']
}
-->
export default <h1>Hello, world!</h1>;
<style lang="scss" scoped="true">
</style>
script的lang支持typescript
<head>标签中xsloader.htmr.enable=true来启用htmrxsloader.react.autojs为false需要配置react与react-dom依赖支持scss语法
支持less语法
{
"paths": {
"vue": "你的vue2的路径/vue.min.js"
},
"deps": {
"*": "vue"
//当有vue组件、jsx语法或htmv时，一定要先加载vue模块
}
}
<img attrs={{src:""}} class="test" style="" />
详细属性:
{
//class:接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
//style:接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
//普通的HTML特性
attrs: {
id: 'foo'
},
//组件prop
props: {
myProp: 'bar'
},
//DOM属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器在`on`属性内，
// 但不再支持如`v-on:keyup.enter`这样的修饰器。
// 需要在处理函数中手动检查keyCode。
on: {
click: this.clickHandler
},
// 仅用于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
//作用域插槽的格式为
//{ name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
//如果组件是其它组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层属性
key: 'myKey',
ref: 'myRef',
//如果在渲染函数中给多个元素都应用了相同的 ref 名，
//那么`$refs.myRef` 会变成一个数组。
refInFor: true
}
可以通过//!embed将脚本（只对需要进行代码转化的有效）直接内嵌到当前文件。
//!embed
import "./embed/a.js";
import "./embed/b.js";
//!embed
转换的源码可在浏览器控制台Sources标签下，对应页面的/$$xs-sources$$/路径下找到，支持脚本断点调试。
您可能需要使用polyfill来更好的使用es6+代码，如Map、array.includes、string.startsWith、async/await等
cnpm install --save @babel/polyfill
在node_modules/下对应目录下去复制polyfill.js文件
该插件是基于AMD协议开发的模块加载器（借鉴了requirejs，但从1.2.x开始进行了重构），支持异步模块加载、插件开发、更灵活的依赖配置、脚本版本配置等。
内置插件包括：css、image、json、text、request、ifmsg等。
在请求地址上加入__source=true则直接返回源码。
babel版本为7.15.3；vue版本为2.6.14；javet的v8引擎；es6代码的判断；//!embed嵌入模式的开始标签支持//!embed:all，用于递归嵌入所有相对页面（需含有后缀）；vue模板文件解析；jsx支持Promise；htmv增加settings.noLoadingMask属性；xsloader的ifmsg连接流程；xsloader.appendArgs2Url(url, urlArgs, encoding = false)增加encoding选项；xshttp增加rhandle属性;//!embed嵌入模式不支持./xxx!插件的问题；xsloader的css插件样式加载顺序；xsloader的插件willCache处理问题；ifmsg的client加入request(返回Promise)与onRequest(data,resolve,reject);.vue的<template>里出现<script>报错的问题；xsloader.clone的bug；xsloader的ifmsg加入超时次数判断；xsloader增加xsloader.FilesPart;xshttp支持xsloader.FilesPart;//!embed特性，用于将多个脚本合并到当前文件；使用webpack-sources对sourcemap进行合并；export xxx from "..."不支持的问题;xsloader.ctrl.enable属性用于控制xsloader.js脚本的更新缓存问题；xshttp上传file对象上传两次的问题；vue文件内部<style>标签;xsloader对htmv的支持；babel到7.14.3；typescript，后缀为.ts；xsloader，当导入css、scss、sass、less后缀名的样式时，自动添加css!前缀react,后缀为.jsr；支持typescript的react,后缀为.jtr；*.htmr文件，可直接通过浏览器访问；vue文件解析标签偏移问题；xsloader4j-maven-plugin插件；scss编译时@import路径处理bug；babel为v7.13.15;xsloader.es6.detectBrowser，默认为true，用于开启浏览器版本判断，对js进行不同级别的转换；polyfill为7.12.1；xsloader.__ignoreCurrentRequireDep属性，配合xsloader，优化处理速度；classpath:开头表示资源目录，其他表示在web路径下（通过servletContext.getRealPath获取）；xsloader的getUrl，提供的相对地址上的参数优先级更高；staticInclude支持移除特殊标记；xsloader.conf.forceCacheSeconds,用于设置配置文件被浏览器强制缓存的时间；xsloader.es6.versionAppendTag，用于自动加版本号；ScriptEnv；xsloader.queryParam获取参数为空字符串时没有使用默认值的问题；ifmsg，页面关闭时会主动调用close；xsloader的service支持urlArgs参数，用于设置通用的版本参数；IConfigFileCheck；.js,.vue,.jsx,/index.js,/index.vue,/index.jsx；xsloader.__currentPath；require().setTag(),便于加载依赖报错时提供tag信息；xsloader.js的try!插件加载模块失败之无法继续执行的bug；xsloader.js的dealPathMayAbsolute协议处理bug；xsloader.js的配置中加入aliasPaths属性，可配置模块别名，别名格式不以"."开头，可出现"/"字符；xsloader.js的ifmsg的Server增加单例模式；ScriptEnv；ScriptEnv的java抛出异常给js后，js端也会收到异常；default.html加入<meta name="renderer" content="webkit"/>与<meta name="force-rendering" content="webkit"/>
，阻止使用兼容模式；__source参数，若__source=true则直接返回源码；demo-servlet/src/main/webapp/lang/）；xsloader.hasDefined(name)判断模块是否已经定义完成（此模块已被执行）；ScriptEnv；<jsx>支持字符串等内容；settings配置中增加heads属性；<jsx>，x属性可以为空；$thiz变量，表示当前vue模块；*.htmv，用于直接显示vue模板；<jsx>组件导致缺少vue报错的bug；xsloader.js
支持ifmsg
*.vue,*.jsx,*.js；<jsx>组件，方便显示jsx；此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型