Перейти к содержимому

Имя webpack не распознано как имя командлета

  • автор:

О метке

Инструмент сборки веб-проектов . Используется для сборки JS, css и html файлов в пакеты — бандлы.

Webpack — инструмент для сборки веб-проектов. Он работает из командной строки и как модуль (библиотека) node.js. Конфигурация динамическая, пишется на javascript.

Webpack имеет механизмы внедрения пользовательских плагинов-загрузчиков. Существует много готовых плагинов для различных библиотек и фреймворков. Позволяет собирать не только Javascript файлы, но и css и любые другие (загрузчики).

  • Документация (англ.)
  • Скринкаст от Ильи Кантора (рус.)

Имя «webpack» не распознано как имя командлета

Отвечаю на вопрос из коммента. build — это просто название команды, его можно назвать как угодно, главное что он вызывает команду «webpack». Можно немного расширить и добавить несколько команд:

"scripts": < "dev": "webpack --mode development", "build": "webpack --mode production" >,

Теперь команда npm run dev будет запускать сборку в режиме разработки, а команда npm run build в режиме продакшена.

А npm run . это просто команда для запуска соответствующего скрипта

Отладка приложения JavaScript или TypeScript в Visual Studio

Область применения:yesVisual Studio Visual Studio для Mac noVisual Studio Code no

Visual Studio позволяет выполнять отладку кода JavaScript и TypeScript. Вы можете использовать точки останова, подключать отладчик, инспектировать переменные, просматривать стек вызовов и применять другие отладочные функции.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. При разработке приложений Node.js необходимо установить рабочую нагрузку разработки Node.js с помощью Visual Studio.

Отладка серверного скрипта

  1. Открыв проект в Visual Studio, откройте файл JavaScript на стороне сервера (например, server.js) и щелкните в полях, чтобы задать точку останова: Screenshot of the Visual Studio code window showing JavaScript code. A red dot in the left gutter indicates that a breakpoint is set.Точки останова — это самая основная и важная функция надежной отладки. Точка останова указывает, в каком месте Visual Studio следует приостановить выполнение, чтобы вы могли проверить значения переменных, работу памяти или срабатывание ветви кода.
  2. Чтобы запустить приложение, нажмите клавишу F5 (или выберите пункт меню Отладка>Начать отладку). В заданной точке останова отладчик приостанавливается (интегрированная среда разработки выделяет инструкцию на желтом фоне). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные переменные и Контрольные значения. Screenshot of the Visual Studio code window showing JavaScript code. A red dot in the left gutter with yellow arrow indicates pause of execution of code.
  3. Чтобы продолжить выполнение приложения, нажмите клавишу F5.
  4. Если вы хотите использовать средства для разработчиков Chrome DevTools, нажмите в браузере Chrome клавишу F12. Эти средства позволяют анализировать модель DOM или взаимодействовать с приложением через консоль JavaScript.

Отладка клиентского скрипта

Visual Studio поддерживает отладку на стороне клиента только для Chrome и Microsoft Edge (Chromium). В некоторых сценариях отладчик автоматически использует точки останова в коде JavaScript и TypeScript, а также во внедренных скриптах в HTML-файлах.

  • Чтобы отладить клиентский скрипт в приложениях ASP.NET, выберите «Параметры>отладки инструментов>«, а затем выберите «Включить отладку JavaScript» для ASP.NET (Chrome, Edge и IE). Дополнительные сведения см. в записи блога отладки JavaScript в Microsoft Edge и этой записи для Google Chrome. Сведения об отладке TypeScript в ASP.NET Core см. в руководстве Создание приложения ASP.NET Core с помощью TypeScript.
  • Для приложений Node.js и других проектов JavaScript выполните описанные здесь действия.

Для ASP.NET и ASP.NET Core отладка внедренных скриптов в файлах .cshtml не поддерживается. Чтобы включить отладку, код JavaScript должен находиться в отдельных файлах.

Подготовка приложения к отладке

Если исходный код минифицирован или создан в транспайлере, таком как TypeScript или Babel, используйте сопоставители с исходным кодом для оптимальной отладки. Возможно даже подключение отладчика к работающему скрипту на стороне клиента без сопоставителей с исходным кодом. Однако задание и использование точек останова могут быть возможны только в минифицированном или транскомпилированном файле, но не в исходном. Например, в приложении Vue.js минифицированный скрипт передается инструкции eval в виде строки, и какого-либо эффективного способа пошаговой отладки этого кода в отладчике Visual Studio, кроме сопоставителей с исходным кодом, не существует. Для сложных сценариев отладки вместо этого может потребоваться использовать средства разработчика Chrome или F12 Tools для Microsoft Edge.

Справку о создании сопоставителей с исходным кодом см. в разделе Создание сопоставлений источника для отладки.

Подготовка браузера к отладке

Для этого сценария используйте Microsoft Edge (Chromium) или Chrome.

  1. Закройте все окна целевого браузера. Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. (Режим полной отладки может блокироваться работающими расширениями браузера, поэтому имеет смысл найти и закрыть лишние экземпляры Chrome в диспетчере задач.) Лучше всего завершить работу всех экземпляров Chrome, даже если вы используете Microsoft Edge (Chromium). Оба браузера используют одну и ту же базу кода Chromium.
  2. Запустите браузер с включенной отладкой. Начиная с Visual Studio 2019, вы можете задать —remote-debugging-port=9222 флаг при запуске браузера, выбрав «Обзор с помощью. > на панели инструментов отладки «.

Screenshot of selecting the Browse With option.

Screenshot of setting your browser options to open with debugging enabled.

Если на панели инструментов отладки не отображается команда «Обзор с. «, выберите другой браузер и повторите попытку. В диалоговом окне «Обзор с помощью» нажмите кнопку «Добавить«, а затем установите флаг в поле «Аргументы «. Используйте для браузера какое-то другое понятное имя, например Edge с отладкой или Chrome с отладкой. Подробности см. в заметках о выпуске. Также можно открыть команду Выполнить кнопки Пуск в Windows (щелкнуть правой кнопкой мыши команду Выполнить) и ввести следующую команду: msedge —remote-debugging-port=9222 или chrome.exe —remote-debugging-port=9222 Ваш браузер будет запущен в режиме отладки. Приложение еще не работает, поэтому страница в браузере будет пустой.

Подключение отладчика к сценарию на стороне клиента

Чтобы подключить отладчик из Visual Studio и использовать точки останова в коде на стороне клиента, необходимо указать отладчику верный процесс. Ниже описывается один из способов.

Screenshot of the Visual Studio code window. A return statement is selected and a red dot in the left gutter indicates that a breakpoint is set.

  1. Перейдите в Visual Studio, а затем установите точку останова в исходном коде, который может быть файлом JavaScript, TypeScript или JSX. (Выберите для точки останова строку кода, в которой допустимы точки останова, например оператор return или объявление var). Чтобы найти конкретный код в транспонированном файле, используйте Ctrl+F (Изменить>Найти и заменить >Быстрый поиск). Для кода на стороне клиента, чтобы использовать точку останова в файле TypeScript, .vueили JSX, как правило, необходимы сопоставители с исходным кодом. Сопоставитель с исходным кодом следует правильно настроить, чтобы он поддерживал отладку в Visual Studio.
  2. Выберите ваш целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка>Запуск без отладки), чтобы запустить приложение в браузере. Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве цели отладки. Приложение откроется в новой вкладке браузера.
  3. Выберите Отладка>Присоединение к процессу.

Совет Начиная с версии Visual Studio 2017, после первого подключения процесса согласно этим инструкциям вы можете быстро присоединять его повторно, выбирая Отладка>Повторно подключиться к процессу.

Screenshot showing how to Attach to a process in Debug menu.

  • В диалоговом окне Подключение к процессу получите отфильтрованный список экземпляров браузера, к которым можно подключиться. Выберите подходящий отладчик для целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium), в поле Подключить к, а затем введите chrome или edge в поле фильтра, чтобы отфильтровать результаты поиска.
  • Выберите процесс браузера с соответствующим портом узла (localhost в этом примере) и нажмите кнопку Присоединить. Порт (например 1337) также может отображаться в поле Заголовок, чтобы помочь выбрать правильный экземпляр браузера. В следующем примере показано, как это выглядит в браузере Microsoft Edge (Chromium).

    Совет Если отладчик не присоединяется и появляется сообщение «Не удалось запустить адаптер отладки» или «Не удалось присоединиться к процессу. Операция недопустима в текущем состоянии» — попробуйте закрыть все экземпляры целевого браузера в диспетчере задач перед попыткой запуска целевого браузера в режиме отладки. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки.

    • Если вам нужно декомпозировать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе Устранение неисправностей.
    • Если вам нужно декомпозировать код в файле с компиляцией в код на языке программирования JavaScript (например, app-bundle.js), но сделать это не удается, удалите файл сопоставления источника filename.js.map.

    Устранение неполадок с точками останова и картами источников

    Если вам нужно использовать точки останова в коде из исходного файла TypeScript или JSX, но сделать это не удается, используйте Подключение к процессу, чтобы присоединить отладчик, как описано в предыдущем разделе. Убедитесь, что ваша среда настроена правильно:

    • Закройте все экземпляры браузера, включая расширения Chrome (используя диспетчер задач), чтобы можно было запускать браузер в режиме отладки.
    • Обязательно запустите браузер в режиме отладки.
    • Убедитесь, что файл сопоставителя с исходным кодом содержит правильный относительный путь к исходному файлу и не включает неподдерживаемые префиксы, такие как webpack:///, которые не позволяют отладчику Visual Studio найти исходный файл. Например, ссылку, подобную webpack:///.app.tsx, можно исправить на ./app.tsx. Это можно сделать вручную в файле сопоставителя с исходным кодом (что удобно для тестирования) или с помощью пользовательской конфигурации сборки. Дополнительные сведения см. в разделе Создание сопоставителя с исходным кодом для отладки.

    Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для Microsoft Edge).

    Создание исходных карт для отладки

    В Visual Studio можно использовать и создавать сопоставления источника для исходных файлов JavaScript. Такая возможность часто нужна, когда исходный код минифицирован или создан в транспайлере, например в TypeScript или Babel. Доступные варианты зависят от типа проекта.

    • Проект TypeScript в Visual Studio по умолчанию автоматически создает сопоставления источника. Дополнительные сведения см. в разделе Настройка сопоставлений источника с помощью файла tsconfig.json.
    • В проекте JavaScript сопоставления источника можно создать с помощью средства упаковки (например, webpack) и компилятора (например, TypeScript или Babel), которые вы можете добавить в проект. Вместе с компилятором TypeScript необходимо добавить еще и файл tsconfig.json и установить опцию компилятора sourceMap . Пример такой операции на основе базовой конфигурации webpack вы найдете в руководстве по созданию приложения Node.js с использованием React.

    Если вы используете сопоставители с исходным кодом впервые, сначала прочтите статью Introduction to JavaScript Source Maps (Введение в сопоставители с исходным кодом JavaScript).

    Чтобы настроить дополнительные параметры для сопоставлений источника, используйте файл tsconfig.json или параметры проекта для проекта TypeScript, но не оба метода сразу.

    Чтобы включить отладку с помощью Visual Studio, необходимо убедиться в правильности ссылок на исходный файл в созданном сопоставителе с исходным кодом (может потребоваться тестирование). Например, если вы используете webpack, ссылки в файле сопоставителя с исходным кодом включают префикс webpack:///, который не позволяет Visual Studio найти исходный файл TypeScript или JSX. В частности, при исправлении для отладки, ссылку на исходный файл (например, app.tsx) следует изменить с webpack:///./app.tsx на ./app.tsx, что включает отладку (путь относительно вашего исходного файла). В следующем примере показано, как настроить сопоставители с исходным кодом в webpack, который является одним из наиболее распространенных средств увязки, чтобы они работали с Visual Studio.

    (Только для webpack.) Если точка останова устанавливается в файле TypeScript или JSX (а не в транскомпилированном файле JavaScript), необходимо обновить конфигурацию webpack. Например, в файлwebpack-config.jsможет потребоваться заменить следующий код:

     output: < filename: "./app-bundle.js", // This is an example of the filename in your project >, 
     output: < filename: "./app-bundle.js", // Replace with the filename in your project devtoolModuleFilenameTemplate: '[resource-path]' // Removes the webpack:/// prefix >,

    Это настройка только для разработки, позволяющая отладку кода на стороне клиента в Visual Studio.

    В сложных сценариях средства браузера (F12) иногда лучше подходят для отладки, так как для них не нужно выполнять изменения в пользовательских префиксах.

    Настройка сопоставлений источника с помощью файла tsconfig.json

    Если вы добавите в проект файл tsconfig.json, Visual Studio будет считать корневой каталог проектом TypeScript. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений и последовательно выберите Добавить > Новый элемент > JSON-файл конфигурации TypeScript. Это действие добавит в проект файл tsconfig.json, аналогичный представленному ниже.

    < "compilerOptions": < "noImplicitAny": false, "module": "commonjs", "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5" >, "exclude": [ "node_modules" ] >
    Параметры компилятора для файла tsconfig.json
    • inlineSourceMap: выведите один файл с исходными картами вместо создания отдельной карты источника для каждого исходного файла.
    • inlineSources: выведите источник вместе с исходными картами в одном файле; требуется задать inlineSourceMap или sourceMap.
    • mapRoot: указывает расположение, в котором отладчик должен находить файлы карты источника (MAP) вместо расположения по умолчанию. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов .map.
    • sourceMap: создает соответствующий ФАЙЛ MAP .
    • sourceRoot: указывает расположение, в котором отладчик должен находить файлы TypeScript вместо исходных расположений. Используйте этот флаг, если в ходе время выполнения и разработки исходные файлы должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.

    Дополнительные сведения о параметрах компилятора вы найдете на странице с параметрами компилятора в справочнике по TypeScript.

    Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project)

    Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка.

    Здесь доступны следующие параметры проекта.

    • Создание исходных карт (эквивалентно sourceMap в tsconfig.json): создает соответствующий файл MAP .
    • Укажите корневой каталог исходных карт (эквивалент mapRoot в tsconfig.json): указывает расположение, в котором отладчик должен находить файлы карты вместо созданных расположений. Используйте этот флаг, если во время выполнения файлы .map и .js должны находиться в разных местах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов сопоставления.
    • Укажите корневой каталог файлов TypeScript (эквивалентный sourceRoot в tsconfig.json): указывает расположение, в котором отладчик должен находить файлы TypeScript вместо исходных расположений. Используйте этот флаг, если в ходе выполнения и разработки исходные файлы должны размещаться в разных каталогах. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов.

    Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)

    Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).

    Однако невозможно автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.

    • Поместите инструкцию debugger; там, где необходимо прерывание: эта инструкция останавливает выполнение динамического скрипта и запускает отладку сразу же в процессе его создания.
    • Загрузите страницу и откройте динамический документ в Visual Studio: необходимо открыть динамический файл во время отладки, задать точку останова и обновить страницу для работы этого метода. В зависимости от используемого браузера (Chrome или Microsoft Edge (Chromium)) этот файл можно найти следующими способами:
      • Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > Имя_нужной_страницы.

      Примечание. Если вы используете Chrome, может появиться сообщение о том, что исходный код между тегами

      Saved searches

      Use saved searches to filter your results more quickly

      Cancel Create saved search

      You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

      vuejs / vue-cli Public

      Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

      By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

      Already on GitHub? Sign in to your account

      Can’t generate a project from a concrete specified template #1858

      Gargo opened this issue Jul 15, 2018 · 1 comment

      Can’t generate a project from a concrete specified template #1858

      Gargo opened this issue Jul 15, 2018 · 1 comment

      Comments

      Gargo commented Jul 15, 2018

      IMPORTANT: Please use the following link to create a new issue:
      https://new-issue.vuejs.org/?repo=vuejs/vue-cli
      If your issue was not created using the app above, it will be closed immediately.
      WHY must I use that link if my issue is not related to any code but that page requres a link to html/js code?!

      Issue:
      https://medium.freecodecamp.org/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9
      According to this link I write:
      vue init webpack vue-router
      Expected:
      template project is generated
      Actual:
      vue-cli · Failed to download repo vuejs-templates/webpack: self signed certificate in certificate chain

      Tried soultions from this link:
      #258
      NOTHING WORKS! The console otuput becomes random:

      > npm_config_strict_ssl=false vue init webpack vue-router npm_config_strict_ssl=false : Имя "npm_config_strict_ssl=false" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написа ния имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + npm_config_strict_ssl=false vue init webpack vue-router + ~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : ObjectNotFound: (npm_config_strict_ssl=false:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

      vue-init not found:

      > vue-init --offline webpack nongcaiyuan-front vue-init : Имя "vue-init" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильно сть пути, после чего повторите попытку. строка:1 знак:1 + vue-init --offline webpack nongcaiyuan-front + ~~~~~~~~ + CategoryInfo : ObjectNotFound: (vue-init:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 
      > vue init --offline webpack nongcaiyuan-front Usage: init [options]  generate a project from a remote template (legacy API, requires @vue/cli-init) Options: -c, --clone Use git clone when fetching remote template -h, --help output usage information Unknown option --offline.

      The text was updated successfully, but these errors were encountered:

      Похожие публикации:
      1. 8 часов 10 минут какой угол
      2. За сколько проходится mirrors edge catalyst
      3. Как отключить обновления windows 11
      4. Как удалить солид воркс с компьютера полностью

    • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *