как использовать модульную систему node.js на стороне клиента - PullRequest
Новая
       2

как использовать модульную систему node.js на стороне клиента

33 голосов
/ 09 февраля 2011

Я хотел бы использовать систему модулей CommonJS в клиентском приложении javascript.Я выбрал nodejs в качестве реализации, но не могу найти учебник или документацию о том, как использовать клиентскую сторону nodejs, т.е. без использования node application.js

Я включил node.js, как это, в свою HTML-страницу: 

<script type="text/javascript" src="node.js"></script>

Обратите внимание, что я не создавал nodejs на своем локальном компьютере, я все равно работаю в Windows (мне известен вариант Cygwin).Когда я хочу использовать функцию require в своем собственном javascript, она говорит, что она не определена. 

var logger = require('./logger');

Мой вопрос: возможно ли использовать nodejs как этот?

Ответы [ 6 ]

36 голосов
/ 19 февраля 2011

SubStack на github имеет модуль node-browserify .

Он будет сжимать и связывать ваши модули и доставлять его как один файл js, но вы используете его так же, как Node.js (пример из модуля readme): 

<html>
    <head>
    <script type="text/javascript" src="/browserify.js"></script>
    <script type="text/javascript">
        var foo = require('./foo');

        window.onload = function () {
            document.getElementById('result').innerHTML = foo(100);
        };
    </script>
</head>
<body>
    foo = <span style='font-family: monospace' id="result"></span>
</body>
</html>

Из модуляописание:

Browserify

Требуется на стороне браузера () для модулей вашего узла и пакетов npm **

Browserify связывает все впереди -времени в указанной вами точке монтирования.Ни одна из этих компаний по загрузке модулей ajaxy.

Дополнительные функции:

  • рекурсивно связывает зависимости модулей npm
  • использует es5-shim для браузеров, которые сосут
  • фильтры для {min, ugl} ification
  • кофейный скрипт тоже работает!
17 голосов
/ 16 мая 2013

Как сказал Марчелло ...

Browserify

Browserify

Это волшебным образом позволяет вам сделать это

15 голосов
/ 09 февраля 2011

Node.js - это серверное приложение, в котором вы запускаете на сервере javascript.То, что вы хотите сделать, это использовать функцию require на клиенте.

Лучше всего просто написать метод require самостоятельно или использовать любую из других реализаций, которые используют другой синтаксис, такой как * 1006.* requireJS .

Проведя небольшое дополнительное исследование, кажется, что никто не написал модуль require с использованием синтаксиса commonJS для клиента.Я в конечном итоге напишу свою собственную в ближайшем будущем, я рекомендую вам сделать то же самое.

[Edit]

Одним из важных побочных эффектов является то, что функция require является синхронной и, следовательно, загружаетсябольшие блоки javascript полностью блокируют браузер.Это почти всегда нежелательный побочный эффект.Вам нужно знать, что вы делаете, если собираетесь это сделать.Синтаксис requireJS настроен так, что он может выполняться асинхронно.

3 голосов
/ 12 июля 2012

Если вы хотите написать код для браузера с теми же модулями стиля, что и для Node.js, попробуйте Webmake . Взгляните также на простой прототип сборки приложения: SoundCloud Playlist Manager

1 голос
/ 20 марта 2019

Webpack

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

Установка

Чтобы использовать модули узлов в вашем проекте, сначала установите node.js на вашем компьютере. Система управления пакетами NPM должна быть установлена ​​по пути. Если вы уже установили node.js, обновите Node.js и NPM до последней версии .

Использование

инициализация

Откройте ваш проект в редакторе кода и инициализируйте npm, набрав npm init -y в командной строке. Затем установите веб-пакет локально, набрав npm install webpack webpack-cli --save-dev. (--save-dev означает, что эти зависимости добавляются в раздел devDependencies вашего package.json файла, который не требуется для производства)

Изменение порядка папок

Следуйте древовидной структуре, чтобы восстановить папку вашего проекта: 

yourProjectName
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

Создайте папку dist для хранения всех дистрибутивных файлов и переместите index.html в эту папку. Затем создайте папку src для всех исходных файлов и переместите файл js в эту папку. Вы должны использовать точно такие же имена файлов и папок , которые указаны в древовидной структуре. (это веб-пакет по умолчанию, но вы можете настроить его позже, отредактировав webpack.config.js)

Зависимости рефактора

Удалите все <script> импорта в index.html и добавьте <script src="main.js"></script> перед тегом </body>. Чтобы импортировать другие модули узлов, добавьте операторы импорта в начале файла index.js. Например, если вы хотите импортировать lodash, просто введите import _ from 'lodash'; и перейдите к использованию _ в вашем файле index.js.

ПРИМЕЧАНИЕ : Не забудьте сначала установить пакет узла, прежде чем импортировать его в JS. Чтобы установить lodash локально, введите npm install lodash. Lodash будет автоматически сохранен в ваших производственных зависимостях в package.json

Запустить Webpack

Наконец, запустите webpack, набрав npx webpack в командной строке. Вы должны увидеть main.js, сгенерированный в папке dist для вас Webpack.

Дополнительные ресурсы

Приведенное выше руководство предоставляет только самый простой способ использования Webpack. Чтобы изучить более полезные варианты использования, перейдите к официальному руководству Webpack. В нем содержатся чрезвычайно подробные учебные пособия по таким темам, как управление активами, управление выпуском продукции, руководства по разработке и производству и т. Д.

Ссылки

https://webpack.js.org/guides/getting-started/

0 голосов
/ 25 октября 2013

Существует хорошая библиотека require.js-like для клиентской стороны.Это называется оберткой.Проверьте это Kamicane / Wrapup

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...