"Неподготовлено ReferenceError: require не определено" с помощью Angular 2/webpack

Я работаю с шаблоном HTML от компании графического дизайна в проекте Angular 2, используя node и webpack.

HTML тянет в различные сценарии, подобные этому:

<script src="js/jquery.icheck.min.js"></script>
<script src="js/waypoints.min.js"></script>

поэтому я требую их в my component.ts:

var icheckJs = require('../js/jquery.icheck.min');
var waypointsJs = require('../js/waypoints.min');

Также есть несколько других скриптов и некоторый SASS, который работает правильно.

webpack счастлив и строит все, и успех "npm start" тоже успешный. Однако, когда он достигает браузера, я получаю эту жалобу:

Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined

который фактически вызывается этой строкой из url.js:

var punycode = require('punycode');

Требуется ли это CommonJs? Я не использовал это в веб-разработке до нескольких недель назад, поэтому я все еще распутываю различные запросы от webback, CommonJs et at.

Вывод из моего webpack.config.js для загрузчика .js выглядит следующим образом:

{ test: /\.js$/, loader: 'script' }

Как мне обойти эту ошибку?

Ответы

Ответ 1

WebPack может сделать это в одиночку. Вам нужно сначала загрузить исходный кусок, используя тег script src. Как правило, это значение записи: ключ в конфигурации WebPack с добавлением -bundle. Если вы не выполняете явный chunking, ваш фрагмент ввода должен быть как начальным, так и входным блоком и иметь в нем время выполнения WebPack. Среда выполнения WebPack содержит и загружает требуемую функцию перед запуском вашего кода.

От вашего входного файла требуются ваши компоненты или все, что вам требуется, поскольку ваши скрипты начнутся там. В принципе, если вы явно не блокируете, JS файл точки входа является единственным, который вы можете включить в script src. От него требуется все остальное. То, что вы включаете, как правило, имеет пакет в имени файла JS. По умолчанию он должен быть main-bundle.js.

Ответ 2

Вы можете сделать это в одной строке, предположив, что у вас

  • расслоение в dist/bundle.js

  • код клиента исходного файла, который будет отображать страницу в браузере в client/client.js

    webpack && webpack ./client/client.js dist/bundle.js \ && webpack-dev-server --progress --color

Вам нужно снова запустить webpack, так как если некоторые источники в библиотеке меняются, вы получите последние изменения, а затем в пакете dist/bundle.js (конечно, вы можете добавить, например, задачу grunt для просмотра файлов). webpack-dev-server будет запускать сервер.

Ответ 3

Для тех, кто ищет тент, но выше не работает:

Короткие

Добавить или заменить текущий target в webpack.config.js на target: 'web'

Дольше

Webpack имеет разные цели, если вы экспериментировали с этим и изменили свою цель на node, она будет использовать 'require' to загрузочные чанки. Лучше всего сделать свою цель (или добавить) target: 'web' в webpack.config.js. Это целевая задача по умолчанию и загружает ваши файлы так, как может обрабатывать браузер.

В итоге я нашел это решение здесь.