Пакет нескольких файлов JavaScript и класс доступа, определенный в комплекте: какую технологию использовать и как? - PullRequest
Новая
       23

Пакет нескольких файлов JavaScript и класс доступа, определенный в комплекте: какую технологию использовать и как?

0 голосов
/ 26 сентября 2019

Я новичок в JavaScript и его технологиях для объединения модулей для использования в браузере, например, Browserify, Webpack и т. Д. Поэтому, пожалуйста, потерпите меня:

Скажем, у меня есть три файла JavaScript, каждый из которых определяеткласс:

file1.js: 

class MyClass1 {
   constructor() {
     ...
   }
   ...

}

file2.js: 

class MyClass2 {
   constructor() {
     ...
   }
   ...

}

Теперь в третьем файле, main.js, я хочу использоватьклассы, определенные в двух других файлах, например: 

class MainClass {
   constructor() {
     this.myClass1 = new MyClass1;
     this.myClass2 = new MyClass2;
   }
   ...


}

И в конце я хочу импортировать скрипт main.js в мой HTML-файл с помощью простого тега скрипта: 

<!DOCTYPE html>
...
<head>
    <script src="../main.js"></script>
</head>
...
<script>
   let mainClass = new MainClass();
   // call some methods on the mainClass object
</script>

Теперь, как лучше всего выполнить эту модульность моего кода?

Мне удалось заставить его работать с Browserify с синтаксисом require, а затем поставить window.MainClass = MainClass в конце main.js.

Однако это может быть не самым чистым решением.Я ищу совет относительно того, как идти о связывании файлов в этом случае.:)

1 Ответ

0 голосов
/ 26 сентября 2019

Я предполагаю, что у вас есть папка, которая будет использоваться для развертывания, например /dist, /public, где находится этот HTML-файл.

С wepback вы можете поместить всефайлов под /src и выполнить, 

   webpack src/main.js -o dist/main.js // you will need webpack cli installed on your machine

Это будет выглядеть как src/main.js как точка входа и связывать файлы с dist/main.js.

Для успешного выполнения этой команды вам необходимо изменить способ экспорта / импорта этих классов.Импорт можно записать так, 

//main.js 
import MyClass1 from 'src/file1'

, а экспорт можно записать так, 

//file1.js
export default class MyClass1 { ... }

И, запустив команду webpack, вы сможете написать то, что хотели внутритег <script>.

Примечание. Вероятно, вы можете написать импорт / экспорт, просто установив веб-пакет.Однако, если вы хотите написать приложение в ES6, вам нужно будет установить другие зависимости.

Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you. Keep in mind that you will still probably need babel for other ES6+ features.
...