Как создать библиотеку javascript, которая работает как на стороне клиента, так и на стороне сервера (Isomorphic)?

Question

Я уже создал библиотеку, используя nodejs, и webpack используется для ее объединения, поэтому ее можно использовать на стороне клиента.

Но если я пытаюсь использовать связанный файл в своем приложении-узле, он не работает. Итак, как мне создать изоморфную библиотеку, которая будет работать как на стороне клиента, так и на сервере?

Answer 1

Использование React с помощью facebook поддерживает создание изоморфных компонентов, которые можно использовать как на стороне клиента, так и на стороне сервера.

Его концепция JSX помогает в этом.

Git Hub Isomorphic Example

React with Node for Isomorphic

Изоморфная Javascript Преимущества:

• Лучше общий пользовательский опыт

• поиска индексируемых

• Легче код обслуживания

• Бесплатные прогрессивные усовершенствования

Answer 2

Это не вопрос сервера или на стороне клиента, что дело используемой системы модуль загрузки.

Как вы уже знаете, что люди там используют CommonJS (который узел использует) AMD (который используется на стороне клиента, чтобы написать модульный JavaScript) и или сценарий тег (на стороне клиента), чтобы загрузить JavaScript модули. Поэтому вы должны каким-то образом подготовить свою библиотеку, чтобы ее можно было использовать с любой из этих систем загрузки модулей. В результате существует UMD (U niversal M МОДУЛЬ D efinition) модель, которая делает ваш модуль совместим со всеми этими системами модуля (см UMD templates, которые люди используют для реализации этого шаблона).

Строительные и пакетирования инструменты (например, WebPack, browserify, ...) есть средства для Bundle ваш модуль как UMD, так он совместим со всеми модуль загрузки системы:

WebPack:

Set libraryTarget и library Выходные конфигурации:

webpack.config.JS

module.exports = { 
    entry: './myModule.js', 
    output: { 
     filename: './dist/myModule.js', 
     // export to AMD, CommonJS, or window 
     libraryTarget: 'umd', 
     // set window global to this name 
     library: 'myModule' 
    } 
}; 

Browserify:

Использование --standalone (-s) вариант:

browserify main.js -s myModule -o myModule.js