Вы отвечаете за поддержку какого-то устаревшего интерфейса? Вы храните скрипты в cshtml? (Я тайно осуждаю вас) Многие из них просто склеивают, как вызовы jQuery ajax? Тогда тебя, мой друг, ждет угощение! (или гид, то же самое)

Требуемые ингредиенты — Node.js (например, из установщика Visual Studio)

Давайте перейдем в корневую папку проекта внешнего интерфейса. Открой там cmd. Тип:

npm init -y

Он инициализирует менеджер пакетов узла. Не все есть в NuGet (ну, почти ничего из мира внешнего интерфейса), поэтому, как веб-разработчику .NET, npm — ваш друг.

Давайте установим Webpack. Думайте об этом как о компиляторе для ваших скриптов. Тип:

npm install webpack webpack-cli -D

Он изменит ваш package.json (созданный предыдущей командой), добавив эти два пакета в качестве devDependencies (то есть инструменты, которые нужны только вам, поскольку они не будут доступны для клиентских браузеров).

Поэтому во время установки вы можете спросить себя, зачем вам нужны эти дополнительные инструменты. Одним из примеров является перенос на более старый JS. Скорее всего, вам нужна поддержка старых браузеров, в которых отсутствуют многие функции. Это заставляет вас не использовать их и вообще писать старый синтаксис. С Webpack в тандеме с Babel вы можете писать все, что душе угодно (если только это не неправильный синтаксис JS).

Инструменты JavaScript в основном работают в cmd, поэтому их неудобно использовать, но их очень легко автоматизировать, так что давайте просто сделаем это. Например, если бы вы использовали TypeScript, для каждого файла вам пришлось бы использовать в cmd «tsc sourceFile outputFile». Но это ужасно, поэтому давайте автоматизируем такие вещи с помощью Webpack:

Создайте в своей корневой папке файл с именем webpack.config.js и передайте этот код или загрузите:

Скорее всего, это будет незнакомо. Помните, что Webpack — это приложение Node, и такие вещи, как require/module.exports, — это способы импортировать/экспортировать что-то из другого файла. Остальное — это JavaScript.

Давайте разберемся, что происходит:

entry: {        
app: './Content/js/app.js',        
Transactions: './Areas/Evidence/Views/Transactions/Index',        Clients: './Areas/Evidence/Views/ClientList/Index'    
},

Точки входа — это то, на что «нацелен» Webpack. Это будут центральные узлы для вашего кода, когда мы перейдем к модулям. Что очень важно,большинство руководств используют Webpack в сочетании содностраничными приложениями (SPA),но никто не упоминает, что такие вещи, как ASP.Net MVC, являются многостраничными. приложений,поэтому им требуется точка входа для каждого «основного» представления, которое у них есть (за исключением частичных). В этом примере у меня их три. Один будет глобальным, для пакетов, которые мы хотим иметь везде, а два других — типичные пакеты основного вида.

output: {        
filename: '[name].js',        
path: path.resolve(__dirname, 'Content/dist'),        
libraryTarget: "window"    
},

Этот раздел посвящен тому, что будет производить Webpack. Первая строка означает, что все скомпилированные файлы будут иметь то же имя, что и их точка входа, поэтому в этом примере у меня будет в папке root/Content/dist имена файлов app.js, Transactions.js, Clients.js. Ой, я только что объяснил вторую строку. :) Это будут файлы, которые вы загружаете через Razor Url.Content на свои страницы. App в Layout.cshtml, другие — в соответствующих представлениях, таких как Transactions.cshtml или Index.cshtml в папке Transactions. LibraryTarget настроен на то, чтобы ваши функции находились в том же месте, что и раньше, поэтому все будет совместимо с вашим старым кодом, а также доступно в таких вещах, как консоль Chrome. В противном случае вы получите инкапсуляцию, подобную вашим функциям в точке входа Transactions в объекте Transactions.foo(), Transactions.bar(). Это потребует большого рефакторинга, и наша цель — безболезненное обновление!

module: {        
rules: [            
{                
test: /\.js$/,

Подъем тяжестей. Webpack не более чем предоставляет файлы для корректных загрузчиков, и делает это путем проверки расширений файлов. В нашем примере он сканирует файлы «.js» и передает их для обработки babel-loader. Это ваша подстраховка, так что вы можете писать на современном JS, поддерживая при этом старые браузеры (чем старше вы будете, тем жирнее будет результат). Цели должны быть понятными, напишите там, что вам нужно. Это все. Я также использую загрузчики css и стилей для файлов css, потому что Webpack был создан в основном для JavaScript, и нам нужен еще один загрузчик, чтобы мы не получили такие вещи, как ‹script› .class { background-color: red;} ‹/script› .

plugins: [        
new webpack.ProvidePlugin({            
axios: "axios"        
}),

Плагинов много, здесь я использую плагин ProvidePlugin (много Inception?) для упрощения глобальной упаковки. Что это делает, так это переписывает каждое появление слова «axios» в наших скриптах на содержимое пакета «axios». Мы также могли бы импортировать аксиомы в наш глобальный файл app.js, но здесь он в основном для разнообразия.

Говоря об Axios, это наша любимая библиотека Ajax. Это самое популярное приложение, которое может похвастаться миллионами загрузок в месяц, и это правильно. В отличие от jQuery.ajax, он основан на Promise, поэтому мы будем использовать его, чтобы превратить такие вещи, как

function bar() {
        $.ajax({
            url: '@Url.Action("Index", "Something")',
            type: "POST",
            traditional: true,
            data: {
                id: foo
                modify: true
            },
            success: function(data) {
            lots of code
            },
            error: function(xhr, textStatus, errorThrown) {
              
            }
        });
    }

(и не дай Бог, если вашему «кучу кода» понадобится еще один Ajax, и еще)

В :

async function bar(){
               const response = await axios.post(URL, data);
               lots of code (and response.data as information we got from server)
}

Мы на полпути, так что вперед!

Устанавливаем все необходимое для Webpack:

Для целей транспиляции:

npm install babel-core babel-loader babel-preset-env babel-polyfill --save-dev

Для аксиом:

npm install axios --save

Откройте файл package.json и вставьте его в раздел scripts (или просто добавьте записи):

"scripts": {
    "watch": "webpack --display-modules --watch --config webpack.config.js --display-error-details --mode development",
    "build": "webpack --config webpack.config.js --display-error-details --mode development --display-modules",
    "production": "webpack -p --mode production --display-modules --config webpack.config.js"
  }

Теперь, когда вы вводите «npm run» с этими ключевыми словами (например, «npm run build»), веб-пакет запускается с этими аргументами.

Создайте в своей корневой папке/Content/js/ файл с именем app.js (или иначе, но убедитесь, что точка входа имеет правильный путь). Просто введите там

import 'babel-polyfill';

Это все, что есть на данный момент. Это будет преобразовано в полифилы, необходимые для поддержки каждой современной функции в браузерах, которые вы указали в качестве целей в конфигурации веб-пакета.

Теперь пикантная часть. Перейдите в папку «Просмотры» чего-либо, в моем примере «Транзакции». Делайте много js-файлов. Разделите на них свой код, предпочитая максимальную ремонтопригодность. Я например разделил по функционалу, поэтому у меня были бы NewTransactionScripts и там только скрипты связанные с этим функционалом, но делайте как хотите. Для каждой функции, которую вы туда поместите, добавьте ключевое слово экспорта, например:

export function foo() { code; }

Теперь создайте там Index.js (или что-то еще, но этот файл должен быть точкой входа Webpack!). Напишите там такие вещи, как:

export * from './yourFile';
export * from './NewTransactionScripts'; //everything, or
export {CreateTransaction, ShowTransaction} from './NewTransactionScripts';

Экспорт здесь означает, что вы экспортируете их на максимально возможный уровень. Объект окна. Это означает, что они будут доступны в консоли Chrome, а в Index.cshtml все они будут доступны и готовы к вызову, как обычно. Время пожинать плоды!

npm run build

Webpack теперь просматривает наши точки входа, такие как Index.js в папке Transactions, и увидит те

export * from './yourFile';

и углубимся и создадим связку Transactions.js в Content/dist. Этот файл вы загружаете в свой cshtml через ‹script› и Url.Content, и все будет просто работать, но вы закончили тем, что разбили свои скрипты на модули меньшего размера (намного лучше для удобочитаемости). Вы открыли себя для использования современного синтаксиса JS, такого как async/await, в своем коде (больше ничего делать не нужно, теперь вы можете писать эти вызовы Ajax, как я показал вам 2 минуты назад!). Теперь вы можете легко минимизировать свой код, используя «производство запуска npm» (еще один скрипт в package.json) и множество других полезных вещей, но это руководство достаточно длинное.

Поздравляем!

P.S. Чтобы что-то изменить в своих скриптах, теперь вам нужно отредактировать конкретный JS-файл и снова собрать пакет, который будет выбран браузером после обновления. К счастью, у нас есть

npm run watch

который будет переделывать ваш пакет после каждого CTRL+S в файле JS!