#javascript #ecmascript-6 #webpack #es6-class
#javascript #ecmascript-6 #webpack #es6-class
Вопрос:
Я следовал руководству по классам es6 и создал небольшую визуализацию на d3. Затем я создал второй и подумал, что мне следует что-то сделать с объединением их в библиотеку, поэтому сначала попробовал модули (затем обнаружил, что браузеры их еще не поддерживают), а затем установил webpack 1.13 и использовал require() (потому что, хотя казалось, что это import должно работать, это не сработало; не поддерживалось до версии 2.0).
Только теперь вместо export default class Foo(data, args) в моем bundle.js У меня есть var Foo = function () { function Foo(data, args) ... .
Интерпретатор просто жалуется, когда я пытаюсь Foo.Foo(data, args) , но моя интуиция здесь такова, что создание экземпляра frankenclass таким образом, вероятно, не является намерением webpack? И да, я мог бы просто объединить все файлы моего модуля в свой собственный bundle.js а затем продолжайте new Foo() , но я пытаюсь использовать соответствующий инструмент объединения.
Я чувствую, что в онлайн-документации существует значительный разрыв между тем, что «возможно» в ES6, и тем, как вы на самом деле делаете это в webpack.
Каков пошаговый способ объединения модулей с webpack, чтобы вы могли создавать свои классы из пакета в вашем index.js скрипт?
Приложение: (Что я сделал до сих пор)
├── bundle.js #supposed to bundle Foo and Bar
├── bundle.js.map
├── index.html #include bundle.js and index.js before </body>
├── index.js #want to be able to new Foo() and Bar()
├── js
| ├── foo.js Foo() lives here
| └── bar.js Bar() lives here
├── LICENSE
├── node_modules
| └── (stuff)
├── package.json
├── README.md
├── test
| └── (stuff)
└── webpack.config.js # builds without errors
Комментарии:
1.
so initially tried modules, (then discovered browsers don't support them yet),вы можете использовать их сейчас, github.com/systemjs/systemjs2. Также, если вам нужен расширяемый javascript, также есть jspm.io это приведет к автоматическому вавилонированию ваших файлов.
3. Спасибо, я могу использовать systemjs здесь, но хотел бы знать, как это сделать с помощью webpack (для взаимодействия с существующим проектом, использующим webpack)
4. Каким образом вы подразумеваете совместимость с другими проектами webpack? Webpack — это в основном просто пакет, если ваш проект webpack может взаимодействовать с предварительно скомпилированным пакетом webpack, то и любой файл javascript может. Единственное исключение, которое я бы сказал по этому поводу, это если проект webpack был скомпилирован как DLL, но не уверен, что это делается очень часто.
5. Нет, я не хочу, чтобы проект использовал разные фреймворки js для разных страниц. Другой инженер уже использует webpack для большей части своих материалов React, и одной странице просто нужна визуализация в формате d3, в которой я подумал, что смогу добиться некоторого прогресса. Это для согласованности.
Ответ №1:
Webpack — это пакет. Это означает, что после запуска webpack он анализирует все ваши файлы и помещает их в один (или несколько, если используется что-то вроде CommonsChunkPlugin).
После этого все внутри пакета становится частным, поэтому, если вы хотите поделиться своими классами, кодом и т.д. затем вам нужно будет предоставить их,https://github.com/webpack/expose-loader это можно сделать, но, по сути, все, что он делает, это размещает материал в глобальном пространстве имен, в браузерах глобальным пространством имен обычно является window объект.
Однако лучший подход к совместному использованию кода с другими пользователями webpack заключается в том, что вы просто показываете ему, где находится ваш код, а затем он может скомпилировать его в свой пакет webpack,. Он может даже выполнять автоматическое разделение пакета с помощью require.ensure , это было бы удобно, если, скажем, ваш класс используется не очень часто, поэтому он будет загружаться по требованию.
Надеюсь, вышесказанное имеет смысл, поскольку я помню, когда я впервые начал использовать webpack, это иногда казалось непосильным, а документация не самая лучшая для новичков.