让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;此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。