Как развернуть приложение дартс (используя веб-интерфейс) без использования Pub Deploy

Question

Какова лучшая стратегия для развертывания приложения Dart Web-ui вручную?

Развертывание паба не работает для меня, и я поднял сообщение об ошибке. Поэтому я думаю, что это лучший способ для развертывания вручную.

Вот как я начал:

1) Из корня проекта я компилирую компоненты webui (dwc.dart)

2) изменить каталог на web/out, затем запустить dart2js

3) скопировать все файлы.js в эту общую папку scripts/js на сервере

4) скопируйте appname.html на сервер, изменив пути к css и скриптам для варианта 3

5) Убедитесь, что dart.js также находится в том же каталоге, что и пункт 3

это насколько я понял. Так что еще мне нужно сделать?

Несколько вопросов:

1) Нужно ли вручную изменять пути к файлам в сгенерированных файлах.js, чтобы они указывали на общие папки на сервере для файлов, на которые они ссылаются, и чтобы эти файлы также находились на сервере?

2) Нужно ли копировать все пакеты на сервер?

3) Любая предпочтительная файловая структура на сервере?

Любые советы по этому вопросу действительно приветствуются.

Благодарю.

Answer 1

Я могу предоставить вам сценарий Grunt, чтобы понять порядок задач. Практически порядок, который я использую, таков:

1. Создайте каталог сборки. Я обычно использую /build/web. Я обычно создаю эти файлы (index.html, main.dart, /css и т. Д. В директории / web). Я создаю остальные компоненты в каталог /lib.
2. Скомпилируйте файл.dart, который содержит файл функции main() (в моем случае "main.dart" для более простых проектов), в Javascript и поместите его в каталог /build/web.
3. Скопируйте другие необходимые файлы и папки в каталог /build/web. Кроме того, во время этого процесса вы будете копировать пакеты, которые нужны вашему проекту. Вы увидите в приведенном ниже примере.
4. Удалить все пустые папки из проекта
5. Вы можете создать задачу Grunt, чтобы открыть файл /index.html в браузере после завершения процесса сборки (я не буду приводить этот пример)

Структура дартс тестового проекта:

testApp
  - gruntfile.js
  - package.js
  /lib
  /packages
      /angular
  /web
    - index.html
    - main.dart
    /css
    /img

Итак, пример сценария Grunt, охватывающий шаги с 1 по 4, выглядит следующим образом (скопируйте его в gruntfile.js):

module.exports = function (grunt) {
    grunt.initConfig({
        // 1.
        // create build web directory
        mkdir: {
            build: {
                options: {
                    create: ['build/web']
                }
            }
        },
        // 2.
        // compile dart files
        dart2js: {
            options: {
                // use this to fix a problem into dart2js node module. The module calls dart2js not dart2js.bat.
                // this is needed for Windows. So use the path to your dart2js.bat file
                "dart2js_bin": "C:/dart/dart-sdk/bin/dart2js.bat"
            },
            compile: {
                files: {'build/web/main.dart.js': 'web/main.dart'}
            }
        },
        // 3.
        // copy all needed files, including all needed packages
        // except the .dart files.
        copy: {
            build: {
                files: [
                    {
                        expand: true,
                        src: [
                            'web/!(*.dart)',
                            'web/css/*.css',
                            'web/res/*.svg',
                            'web/packages/angular/**/!(*.dart)',
                            'web/packages/browser/**/!(*.dart)'
                        ],
                        dest: 'build'
                    }
                ]
            }
        },
        // 4.
        // remove empty directories copied using the previous task
        cleanempty: {
            build: {
                options: {
                    files: false
                },
                src: ['build/web/packages/**/*']
            }
        },
    });

    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    grunt.registerTask('default', [
        'mkdir:build',
        'dart2js',
        'copy:build',
        'cleanempty:build'
    ]);
};

Так что это пример сценария Grunt.

Создайте файл /gruntfile.js в корневом каталоге вашего проекта и скопируйте / вставьте в него скрипт.

Создайте файл /package.json в корневом каталоге вашего проекта и скопируйте / вставьте следующий скрипт:

{
  "name": "testApp",
  "version": "0.0.1",
  "description": "SomeDescriptionForTheTestApp",
  "main": "",
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
  "author": "YourName",
  "peerDependencies": {
      "grunt-cli": "^0.1.13"
  },
  "devDependencies": {
      "grunt": "^0.4.5",
      "grunt-cleanempty": "^1.0.3",
      "grunt-contrib-copy": "^0.7.0",
      "grunt-dart2js": "0.0.5",
      "grunt-mkdir": "^0.1.2",
      "matchdep": "^0.3.0"
  }
}

Откройте Командную строку в Windows, Терминал в Linux, перейдите в корневой каталог вашего проекта и используйте эту команду:

npm install

Подождите, пока все необходимые модули Grunt будут загружены в ваш локальный проект. Как только это закончится, введите эту команду в командной строке или терминале:

node -e "require('grunt').cli()"

Вы можете использовать это, чтобы запустить задачу Grunt по умолчанию, не устанавливая Grunt глобально в вашей системе.

Теперь, чтобы узнать точную структуру сборки для вашего проекта (включая пакеты, которые нужны проекту), выполните сборку с помощью Pub Build. Тогда вы сможете поручить Grunt создать ту же самую структуру dir.

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

Надеюсь, что это поможет вам понять процесс и начать работу с тестовым приложением. Добавьте свои комментарии, чтобы сделать это еще лучше и упростить его еще больше.

Answer 2

Я написал для него скрипт Grunt (так как у меня не было времени искать, как правильно писать код для Grunt, я не делился кодом, потому что это беспорядок), но в основном я делаю это:

• составление списка файлов с dwc для данного out реж
• скомпилируйте его в javascript
• очистить все неразвертываемые файлы
• изменить некоторые пути внутри HTML, чтобы они соответствовали путям сервера (по некоторым причинам это изменяется в процессе компиляции)
• удалить все пакеты, кроме тех, которые мне действительно нужны (JS interopt и browser)

Поскольку я использую только версию JS, я удаляю все пакеты dart. Поскольку пути внутри файлов HTML зависят от вас, вы уже можете использовать структуру, которая подходит вам / вашему серверу.