Создать Javascript для клиента браузера из различных файлов сценариев типов (модулей) в отдельные пространства имен - PullRequest
Новая
       44

Создать Javascript для клиента браузера из различных файлов сценариев типов (модулей) в отдельные пространства имен

0 голосов
/ 12 июня 2018

Я пишу приложение JS для клиента браузера.Исходный код находится в Typescript в отдельных файлах.И результатом для браузера ДОЛЖНЫ быть (системные требования) два js-файла.

Структура исходного файла и файлы кода (src / client) следующие: 

/project
    /assets
        /js
            jquery.js
/core
    /ts
        app.ts
        basics.ts
        helper.ts
/extended
    /module1
        /ts
            some1_1.ts
            some1_2.ts
    /module2
        /ts
            some2_1.ts
            some2_2.ts

Вывод, как JS-файлы, выглядит следующим образом: 

/dist
    /public
        /js
            jquery.js
            bundleCore.js  
            bundleExtended.js

Итак, HTML-файл выглядит примерно так: 

<html>
    <body>
        ...
        <script src="/js/jquery.js"></script>
        <script src="/js/bundleCore.js"></script>
        <script src="/js/bundleExtended.js"></script>
    </body>
</html>

Я на самом деле использую средство запуска задач (gulp), чтобы присоединиться искомпилировать все файлы ts из / core / * в buldleCore.js, а все из / extended / * - в bundleExtended.js

Я также использую browserify для обеспечения совместимости браузера с кодом TS.

С gulpЯ перемещаю, объединяю и удаляю файлы в папке / core в одном файле, а файлы в папке / extended в другом файле.Это получает два файла в dist / public / js

Мой tsconfig, выглядит следующим образом: 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "noUnusedLocals": false,
    "sourceMap": true
  },
  "files": [
    "./node_modules/@types/jquery/index.d.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ],
  "compileOnSave": false  
}

Проблема: две глобальные области создаются в глобальной области видимости.Область видимости для «bundleCore.js» и другие для «bundleExtended.js», оба разделены, и невозможно взаимодействовать друг с другом.Например: 

(function()
    //here the bundleExtended code
)();

(function()
    //here the bundleCore code
)();

Я хотел бы иметь возможность хранить как в глобальной области видимости (в отдельных пространствах имен по исходному файлу), так и в отдельных пространствах имен, чтобы я мог достичь и получить доступ к их областям.Пример: 

// on bundleCore
    var MyApp = (function(...));
    var MyBasics = (function (...));
    var MyHelper = (function(...));

// on bundleExtended
    var MyModule1 = (function(){
        ...
        MyBasics.anyFunction(); //acces by namespace
        var oneHelper = new MyHelper(); //create an instance class
        oneHelper.anyMethod();
        ...
    })();

Или альтернативно: 

// From bundleCore
    var MyCore = (function(...//bundleCore namespaces here));

// From bundleExtended
    var MyModules = (function(){
        ...
        MyCore.MyBasics.anyFunction(); //access by namespace
        var oneHelper = new MyCore.MyHelper(); //create an instance class
        oneHelper.anyMethod();
        ...
    })();

Итак, вопрос: есть ли способ достичь этого?Что будет лучшим способом?Нужно ли менять сценарий, инструменты или технологии, используемые для?

Ваши ответы приветствуются, большое спасибо

PD: Мне очень жаль моего английского, я надеюсь, что вы понимаетемне

...