Слияние кода завершено, страница обновится автоматически
Обеспечить поддержку Java Web-проекту для JavaScript ES6+, *.scss, *.less, *.vue, *.jsx, *.ts и других.
Текущая версия: 1.3.5
https://mvnrepository.com/artifact/com.xishankeji/xsloader4j-core
Внимание (WARNING): в среде Linux может потребоваться обновить libstdc++.so.
Для некорневого пользователя можно использовать следующий способ:
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.js загрузчик доступа путь: /contextPath/xsloader.js
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
— xsloader.es6.polyfill: использовать polyfill, true для автоматического загрузки polyfill, по умолчанию true. — xsloader.es6.debug: режим отладки, true означает, что после изменения файла будет выполнен повторный анализ. — xsloader.es6.name: имя каталога, по умолчанию default, полезно, когда несколько проектов используют один и тот же временный каталог. — xsloader.sourcemap: преобразовать source map. — xsloader.es6.dealt.ignores: игнорировать каталоги преобразования, разделенные запятыми, например «/static/lib1,/static/lib2». — xsloader.es6.dealt.static: статический ресурс в пути к ресурсам (используется в spring boot встроенной версии), например, «/static», несколько значений разделены запятыми. — xsloader.es6.extensions: суффикс скрипта, можно опустить указанный суффикс в расширениях (но путь должен содержать / разделитель), по умолчанию «.js,.vue,.jsx,.ts,.jsr,.jtr,/index.js,/index.vue,/index.jsx,/index.ts,/index.jsr,/index.jtr», и значение может быть только [.js,.vue,.jsx,.ts,.jsr,.jtr,/index.js,/index.vue,/index.jsx,/index.ts,/index.jsr,/index.jtr]. — xsloader.es6.detectBrowser: анализировать разные уровни js в соответствии с версией браузера, по умолчанию — true. — xsloader.conf.properties.xxx: параметры могут быть непосредственно использованы в файле конфигурации xsloader с помощью #{propName}. — xsloader.htmv.enable: включить htmv, по умолчанию false. — xsloader.htmv.paths: настроить шаблон HTML по умолчанию (необязательно). classpath: начало указывает на каталог ресурсов, другие указывают на веб-путь (полученный через servletContext.getRealPath). — xsloader.conf.forceCacheSeconds: время, в течение которого браузер принудительно кэширует. — xsloader.es6.versionAppendTag: если этот тег установлен, после изменения файла он будет добавлен в конец этого тега; если за этим тегом следует запятая, перед ним должна стоять запятая. — xsloader.react.autojs: по умолчанию true, импортировать ли встроенные зависимости react. — xsloader.react.product: по умолчанию true, использовать ли встроенные зависимости реакции в режиме продукта. — xsloader.ctrl.enable: по умолчанию true, добавить ли параметр управления в ответ конфигурации. — xsloader.embed.enable: глобальный переключатель //!embed, по умолчанию true.
Создайте файл xsloader-conf.js в каталоге ресурсов (например, src/main/resources):
— Доступ к этому файлу конфигурации: /contextPath/xsloader.conf
— Обратите внимание, что этот файл конфигурации является объектом JSON в формате JS, который поддерживает JS-скрипты.
— Для получения более подробной информации о конфигурации этого файла см.: Конфигурация модуля загрузчика xsloader.
— Параметры конфигурации могут ссылаться на #{propName}, а contextPath по умолчанию равен текущему параметру контекста сервлета.
— Время кеширования этого файла конфигурации составляет 30 секунд, и urlArgs может контролировать версию других ресурсов, чтобы эффективно избежать проблем с кешем. 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() {} ```
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 (
из функции
); }, onClickVnodex($event){ alert("onClickVnodex:"+$event); }, onClickp($event){ alert("onClickp:"+$event); } }, components:{ comp1, comp2:()=>import("./jsx/comp2.jsx") // поддержка асинхронной загрузки } });
## 7. Другие инструкции
### 1. Упаковка
- После упаковки в виде war-пакета для указанной системы размер увеличится примерно на 20 Мб. Например, при упаковке для запуска в системе Linux можно исключить зависимости j2v8 для Windows и Mac в `pom.xml`:
```xml
<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.xsloader.es6.extensions.\jsx и jsx\ из файлов Vue).<jsx> (необходимо настроить глобальный модуль Vue), через атрибут x (возвращает функцию или объект JSX, который может напрямую отображать скомпилированный объект JSX).let ...
import ...
export ...
const ...
Переменная thiz указывает на текущий модуль, для получения дополнительной информации см. xsloader's this
{
"paths": {
"vue": "путь к вашему vue2/vue.min.js"
},
"deps": {
"*": "vue"
// Когда есть компоненты Vue, синтаксис JSX или HTMLV, обязательно сначала загрузите модуль Vue
}
}
<template>
</template>
<script>
</script>
<style lang="scss" scoped="true">
</style>
<script> поддерживает синтаксис JavaScript, аналогичный *.js.\jsx и jsx\ в файлах Vue).return (`\jsx
<div>HelloJSX</div>
\jsx`)
<transition> вы можете установить для $keepVueStyle компонента, заключённого в переход, значение true, а затем вызвать эту функцию вручную после завершения анимации, чтобы уничтожить стиль.<style> может содержать несколько тегов style; scoped:true (scoped), false1、Обратите внимание, что здесь, когда для scoped установлено значение true, это только добавляет случайный класс к корневому элементу.
2、Тег <style> может содержать несколько
{
"paths": {
"vue": "Путь к вашему vue2/vue.min.js"
},
"deps": {
"*": "vue"
// При наличии компонентов Vue, синтаксиса JSX или HTMLV обязательно сначала загрузите модуль 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 или HTMLV обязательно сначала загрузите модуль Vue
}
}
xsloader.htmv.enable=true. *3.2) .htmr
Данный файл фактически является файлом формата jsr, более подробную информацию см. в файле *.jsr.
Файл htmr не содержит тег <template>, после html-комментария <!----> требуется перенос строки, перед тегом <style> также требуется перенос строки.
Код на языке JavaScript может быть без тега script, тег style должен располагаться после кода JavaScript, код JavaScript не может содержать теги <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 поддерживает язык TypeScript.
Настройки документа выполняются через комментарий settings с использованием JSON:
<head>.Доступ к файлу htmr можно получить напрямую через браузер (на стороне Java будет выполнено автоматическое преобразование).
Для включения htmr необходимо установить xsloader.htmr.enable=true.
Если xsloader.react.autojs имеет значение false, необходимо настроить зависимости react и react-dom.
*4) .scss
Поддерживает синтаксис SCSS.
*5) .less
Поддерживает синтаксис LESS.
*6) .jsx
Эффект аналогичен эффекту файлов *.js.
При наличии компонентов Vue, синтаксиса JSX или htmv необходимо в конфигурационном файле loader настроить зависимость Vue:
{
"paths": {
"vue": "你的vue2的路径/vue.min.js"
},
"deps": {
"*": "vue"
//当有vue组件、jsx语法或htmv时，一定要先加载vue模块
}
}
Свойства, классы и события задаются аналогично Vue $createElement:
<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
},
// Пользовательские директивы. Обратите внимание, что вы не можете присвоить значение oldValue в binding, потому что 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
}
7) .jsr,.jtr
Файлы с расширением .jtr имеют язык TypeScript, код написан в стиле React, синтаксис аналогичен JavaScript и JSX, свойства аналогичны React.
8) Объяснение объединения файлов
Через //!embed можно напрямую встраивать скрипты (только те, которые требуют преобразования кода) в текущий файл. Поддерживается рекурсия. Обратите внимание: нельзя опускать расширение файла.
//!embed
import "./embed/a.js";
import "./embed/b.js";
//!embed
9) Исходный код sourcemap
Преобразованный исходный код можно найти в консоли браузера на вкладке Sources в разделе /$$xs-sources$$/, поддерживается отладка скрипта.
Возможно, вам потребуется использовать polyfill для лучшей работы с кодом ES6+, например Map, array.includes, string.startsWith, async/await и т. д.
По умолчанию xsloader.es6.polyfill имеет значение true и автоматически загружает polyfill. В каталоге проекта polyfill/ можно скачать некоторые версии файлов JavaScript. Также можно перейти на сайт https://babeljs.io/docs/en/babel-polyfill/ и скачать оттуда.
cnpm install --save @babel/polyfill
Скопируйте файл polyfill.js из каталога node_modules/ в соответствующий каталог.
Этот плагин представляет собой загрузчик модулей на основе AMD (заимствован из RequireJS, но был переработан начиная с версии 1.2.x). Он поддерживает асинхронную загрузку модулей, разработку плагинов, более гибкие настройки зависимостей и разработку скриптов.
Встроенные плагины включают css, image, json, text, request и ifmsg.
Добавление __source=true к адресу запроса приведёт к возврату исходного кода. 2021/06/22
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.v1.2.49 2021/05/14
babel до версии v7.13.15.xsloader.es6.detectBrowser по умолчанию со значением true, чтобы активировать определение версии браузера и преобразование кода на разных уровнях.polyfill до 7.12.1.xsloader.__ignoreCurrentRequireDep для оптимизации скорости обработки вместе с xsloader.xsloader.htmv.paths: указать пути по умолчанию для HTML шаблонов (опционально). Если путь начинается с classpath:, это указывает на каталог ресурсов, в противном случае — на путь в веб-каталоге (получается через servletContext.getRealPath).getUrl в xsloader, чтобы параметры на относительных адресах имели более высокий приоритет.v1.2.36 2021/03/26
staticInclude.xsloader.conf.forceCacheSeconds для управления временем принудительного кэширования конфигурационных файлов браузером.xsloader.es6.versionAppendTag для автоматического добавления номера версии.ScriptEnv.xsloader.queryParam не использовал значение по умолчанию при получении пустой строки в качестве параметра.ifmsg: закрытие страницы вызывает вызов close.urlArgs в сервисе xsloader для настройки общих параметров версии.v1.2.19 2021/01/04
IConfigFileCheck.xsloader.es6.extensions, которая по умолчанию включает .js, .vue, .jsx, /index.js, /index.vue, /index.jsx.xsloader.__currentPath.require().setTag(), что облегчает предоставление информации о тегах при загрузке зависимостей с ошибками.try! в плагине xsloader.js не мог продолжить выполнение после неудачной загрузки модуля.xsloader.js.aliasPaths в конфигурацию xsloader.js, которое позволяет настраивать псевдонимы модулей, начинающиеся не с точки, и может содержать символ /.Server в конфигурации xsloader.js ifmsg.v1.2.6 2020/11/06
ScriptEnv.ScriptEnv, js также получает это исключение.jsx, но можно использовать следующий метод для предотвращения путаницы (перед компиляцией java серверная часть удалит \jsx и jsx\ из файлов Vue):
<meta name="renderer" content="webkit"/> и <meta name="force-rendering" content="webkit"/> в файл default.html, чтобы предотвратить использование режима совместимости.v1.2.1 2020/10/07
babel и polyfill.__source, который возвращает исходный код при значении true.demo-servlet/src/main/webapp/lang/).v1.1.60 2020/09/14
xsloader.es6.name.xsloader.hasDefined(name), которая проверяет, был ли модуль уже определён и выполнен.v1.1.55 2020/08/21
ScriptEnv.<jsx>.v1.1.52 2020/07/10
heads в настройку settings в htmv.v1.1.49 2020/06/24
<jsx>, позволяя x быть пустым.v1.1.46 2020/05/18
*.htmv для прямого отображения шаблонов vue.<jsx>, вызывающая ошибку отсутствия vue при использовании xsloader4j-server-bridge.Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )