Добрый день. Может кто сталкивался с таким вопросом о применении ES6 в проекте? Думаю, что всем известно о ситуации с поддержкой браузеров новых форматов ES. То, что IE тяжело работает с ES6 и т.д., в связи с чем возникает вопрос о использовании такой штуки, как Babel, который так сказать конвертнет в поддерживаемый синтаксис.

Пытался ли кто прикрутить Babel в проекте?

Или же может есть идеи какие-то, как сделать это?

Нравится

1 комментарий

Добрый день!

E11 не поддерживает стандарт ES6.

Для того чтобы код написанный с применением фич ES6 работал, выполняются следующие приемы: добавление полифилов и транспайлинг.

Полифилы имитируют классы и дополнительные методы к существующим классам (например добавляют класс Promise).

Транспайлинг - процесс преобразования кода в формате ES6 в формат ES5 (например дает поддержку таких конструкций как лямбды, импорты, экспорты и т.д.)

В ядровой части системы (которая потом собирается в all-combined) используется библиотека полифилов corejs и транспайлинг с помощью инструмента babel. Соответственно в коде для ядра могут использоваться фичи ES6. 

В конфигурации же ситуация другая, потому что транспайлинг кода не применяется, но так как библиотека corejs уже подключена там можно использовать некоторые фичи, например такие классы как Promise (которые не видоизменяют синтаксис языка и соответственно не требуют транспайлинга).

Показать все комментарии

Использование ES6 в JavaScript модулях и клиентских схемах?
Собственно пробовал ли кто ? или может у оф.представителей есть рекомендации/предостережения на этот счет.
Уж больно много возможностей предоставляет новый стандарт, и фактически полностью поддерживается мажорными версиями всех популярных браузеров - ну как минимум в части:
promise, yield, именованных аргументов функций и значений по умолчанию, деструктуризация массивов и объектов и т.д.

Нравится

9 комментариев

Здравствуйте, в системных требованиях все еще значится IE11:
https://academy.terrasoft.ua/documents/marketing/7-8/sistemnye-trebovan…
А следовательно в рамках ядра и схем системы не может быть ни промисов, ни большинства других фишек ES6.
Вы конечно можете начать использовать в своих доработках любые вещи из ES6, но тем самым ограничите доступ к системе соответствующими браузерами.
Таблица поддержки ES6 браузерами:
https://kangax.github.io/compat-table/es6/

IE11... будь он неладен :)
Ну гипотетически с версии 7.10 - появляется полноценная выгрузка модулей в ФС и их комбэк (еще не пробовали но в release notes - есть)
Это позволяет подключить к делу Babel, не известно как он дружит с AMD-нотацией конечно, надо попробовать "бабельнуть"
Вот собственно пример:
Исходный код схемы использующей ES6

define("KmProjects1Page", ["TestMixin"], function(TestMixin) {
	return {
		entitySchemaName: "KmProjects",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		attributes: {
			"TestAttrDefinition": {
				"dataValueType": Terrasoft.DataValueType.BOOLEAN,
				"value": false,
				"dependencies": [
					{
						"columns": ["Test"],
						"methodName": "TestMethod"
					}
				]
			}
		},
		methods: {
			"testES6Usage": function() {
			  // Expression bodies
        var odds = evens.map(v => v + 1);
        var nums = evens.map((v, i) => v + i);
        var pairs = evens.map(v => ({even: v, odd: v + 1}));
 
        // Statement bodies
        nums.forEach(v => {
          if (v % 5 === 0)
            fives.push(v);
        });
 
        // Lexical this
        var bob = {
          _name: "Bob",
          _friends: [],
          printFriends() {
            this._friends.forEach(f =>
              console.log(this._name + " knows " + f));
          }
        }
 
        //classes
        class SkinnedMesh extends THREE.Mesh {
          constructor(geometry, materials) {
            super(geometry, materials);
 
            this.idMatrix = SkinnedMesh.defaultMatrix();
            this.bones = [];
            this.boneMatrices = [];
            //...
          }
          update(camera) {
            //...
            super.update();
          }
          get boneCount() {
            return this.bones.length;
          }
          set matrixType(matrixType) {
            this.idMatrix = SkinnedMesh[matrixType]();
          }
          static defaultMatrix() {
            return new THREE.Matrix4();
          }
        }
 
        //promise
        let promise = new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("result");
          }, 1000);
        });
        promise.then(
            result => {
              alert("Fulfilled: " + result);
            },
            error => {
              alert("Rejected: " + error);
            }
          )
			}
		},
		mixins: {
			TestMixin: "Terrasoft.TestMixin"
		},
		rules: {}
	};
});

После обработки Babel

"use strict";
 
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
define("KmProjects1Page", ["TestMixin"], function (TestMixin) {
  return {
    entitySchemaName: "KmProjects",
    details: /**SCHEMA_DETAILS*/{} /**SCHEMA_DETAILS*/
    , diff: /**SCHEMA_DIFF*/[] /**SCHEMA_DIFF*/
    , attributes: {
      "TestAttrDefinition": {
        "dataValueType": Terrasoft.DataValueType.BOOLEAN,
        "value": false,
        "dependencies": [{
          "columns": ["Test"],
          "methodName": "TestMethod"
        }]
      }
    },
    methods: {
      "testES6Usage": function testES6Usage() {
        // Expression bodies
        var odds = evens.map(function (v) {
          return v + 1;
        });
        var nums = evens.map(function (v, i) {
          return v + i;
        });
        var pairs = evens.map(function (v) {
          return { even: v, odd: v + 1 };
        });
 
        // Statement bodies
        nums.forEach(function (v) {
          if (v % 5 === 0) fives.push(v);
        });
 
        // Lexical this
        var bob = {
          _name: "Bob",
          _friends: [],
          printFriends: function printFriends() {
            var _this = this;
 
            this._friends.forEach(function (f) {
              return console.log(_this._name + " knows " + f);
            });
          }
        };
 
        //classes
 
        var SkinnedMesh = function (_THREE$Mesh) {
          _inherits(SkinnedMesh, _THREE$Mesh);
 
          function SkinnedMesh(geometry, materials) {
            _classCallCheck(this, SkinnedMesh);
 
            var _this2 = _possibleConstructorReturn(this, _THREE$Mesh.call(this, geometry, materials));
 
            _this2.idMatrix = SkinnedMesh.defaultMatrix();
            _this2.bones = [];
            _this2.boneMatrices = [];
            //...
            return _this2;
          }
 
          SkinnedMesh.prototype.update = function update(camera) {
            //...
            _THREE$Mesh.prototype.update.call(this);
          };
 
          SkinnedMesh.defaultMatrix = function defaultMatrix() {
            return new THREE.Matrix4();
          };
 
          _createClass(SkinnedMesh, [{
            key: "boneCount",
            get: function get() {
              return this.bones.length;
            }
          }, {
            key: "matrixType",
            set: function set(matrixType) {
              this.idMatrix = SkinnedMesh[matrixType]();
            }
          }]);
 
          return SkinnedMesh;
        }(THREE.Mesh);
 
        //promise
 
 
        var promise = new Promise(function (resolve, reject) {
          setTimeout(function () {
            resolve("result");
          }, 1000);
        });
        promise.then(function (result) {
          alert("Fulfilled: " + result);
        }, function (error) {
          alert("Rejected: " + error);
        });
      }
    },
    mixins: {
      TestMixin: "Terrasoft.TestMixin"
    },
    rules: {}
  };
});

Вполне себе "съедобный код, если только внутрях какой-либо сборщик не обрезает содержимое за рамками define конструкции, но вроде - нет такого.

PS: Единственное, что для полного счастья надо бы подключить полифил от Babel, и вот кстати вопрос - как в рамках идеологии системы корректно подключать JS-либы ?

"Севостьянов Илья Сергеевич" написал:выгрузка модулей в ФС

Это было и раньше, но для on-site.
"Севостьянов Илья Сергеевич" написал:корректно подключать JS-либы

Через define, к примеру схема: jQuery, там в теле дефайна просто функция которая сама себя и вызывает, обогащая глобальный контекст либой JQuery, в глобальную переменную $
Так что полифилы можно подключить примерно таким же способом, т.к. они обогащают глобальный контекст.
В схеме где нужна будет данная логика, схему либы необходимо будет подключать в блок зависимостей:
define("ContactPageV2", ["JQuery"], function() { ... Либо в ините, через реквайр:
require(["jQuery"], function() {});
Так же через define можно делать либы что возвращают объект, но с этим думаю понятно.
define("ContactPageV2", ["MyLib"], function(myLib) { ...
require(["MyLib"], function(myLib) {});

"Максим Шевченко" написал:Это было и раньше, но для on-site.

В каком формате ?

Мы изначально сильно болели этой темой начиная работать еще с 7.8
Задавали вопрос в саппорт, вот нам как раз про "весенний релиз" - обещали, ну вот в 7.10 появилось в релиз-нотах.

Если это можно сделать для 7.8, 7.9 - прошу поделиться HowTo ? (Т.к. проекты есть и вряд ли они прям быстро сейчас все пообновляются)

PS: Можно было чекаутить/чекинить из SVN в ФС - но это то еще удовольствие особенно в части работы со схемами объектов и Бизнес процессами, да и метаданных тьма, абсолютно не ясно что там от чего зависит, т.к. судя по истории комитов в SVN из приложения просто работа с кодом схем иногда приводит к изменению каких-то метаданных и т.д.

"Севостьянов Илья Сергеевич" написал: каком формате ?

Я имел в виду useFileContent, для он-сайт, выгружает схемы в ФС, и позволяет разрабатывать прямо там, вот инструкция: https://academy.terrasoft.ru/documents/technic-sdk/7-9/rabota-s-klients…

ну это только схемы, причем "скопом" без иерархического какого либо деления, что не есть удобно - это раз, во-вторых это никоим образом не позволяет в виде файлов опять же деплоить на прод... вообщем годится только для выгрузки сорцов по сути.

"Севостьянов Илья Сергеевич" написал:ну это только схемы, причем "скопом" без иерархического какого либо деления, что не есть удобно - это раз, во-вторых это никоим образом не позволяет в виде файлов опять же деплоить на прод... вообщем годится только для выгрузки сорцов по сути.

Скоро будет документация по ФС в 7.10:
http://www.community.terrasoft.ru/forum/topic/25319

Будет с иерархией, но тоже только для on-site.

Ну я так понимаю будет возможность пакеты заворачивать в zip/gz и сетапить.
На демочке уже засекли занятные новые опции:

Я так понимаю речь как раз идет про пакеты выгружаемые в ФС.
Но засетапить их можно будет я так понимаю и в cloud версии ?

Здравствуйте, Илья.

Да, для сайтов on-demand также доступна данная функция. В версии 7.10 пользователи могут самостоятельно устанавливать пакеты.

Показать все комментарии