Как использовать классы es6 в * .cshtml

Question

Добавлены файлы настроек в проект (packege.json & webpack.config.json), добавлено babel. На данный момент получается так: есть каталог / Scripts / build & Scripts / es6 (/main.js). При запуске команды npm run build все строится нормально (из файла main.js, как указано в разделе entry файла webpack.config.json), файл bundle.js создается в / Scripts / build directory. В вышесказанном проблем нет и все как надо. Теперь я хочу использовать классы js (их методы и свойства) в представлениях (* .cshtml). Как мне это сделать? Или нужен другой подход? Если я пишу js код в main.js, то я его строю, тогда код выполняет. Но как мне сделать функцию и запустить ее (например, нажав кнопку)?

packege.json:

{
  "name": "SensorDashboard",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress --mode='development' -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: ['./Scripts/es6/main.js'],
    output: {
        path: path.resolve(__dirname, './Scripts/build'),
        filename: 'bundle.js'
    },
    // IMPORTANT NOTE: If you are using Webpack 2 or above, replace "loaders" with "rules"
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }]
    }
}

main.js:

import { Map, MyClass } from './Map';

(function () {
    window.test_func = function () {
        let cl = new MyClass();
        cl.send("asd qweqwe");
    };
})();

MyClass:

export class MyClass {
    send(message) {
        console.log(message);
    }
}

затем я запускаю команду: npm run build, и файл создан (/Script/build/bundle.js)

тогда я пытаюсь использовать в *.cshtml:

@{Layout = null;}
...
<script src="~/Scripts/build/bundle.js"></script>
...
<div>....</div>
<script type="text/javascript">
   $(document).ready(function () {
        test_func(); //this work

        let m = new MyClass(); //this don`t work (MyClass is not defined)
        m.send("asd");
   });
</script>

Answer 1

Я думаю, что это должно быть так же просто, как загрузить скрипт в ваш файл .cshtml со стандартным тегом скрипта внизу файла, который будет выглядеть примерно так:

@section Scripts { 
    <script src="@Url.Content("~/Scripts/build/main.js")"></script>

}

(возможно, без @Url.Content, хотя я не уверен на 100% нерегулярно)

Затем можно вызвать функцию, выполнив что-то вроде следующего примера, есть несколько способов, которые, вероятно, зависят от того, как выглядит ваш класс в главном. .js:

@section Scripts { 
    <script src="@Url.Content("~/Scripts/build/main.js")"></script>

    document.getElementById("myButton").onclick = function(){
            let someClass = new Class();
            someClass.DoSomething();

        }
}

Дайте мне знать, если я неправильно понял вопрос.

Редактировать:

Хорошо, извините, я неправильно понял.

Взгляните на эту ссылку и посмотрите, поможет ли она вам? Похоже, именно то, что вам нужно.

В нем есть инструкции о том, как настроить веб-пакет для разрешения внешних вызовов.

Выглядит так же просто, как добавление этих двух строк к вашему выводу:

libraryTarget: 'var', library: 'EntryPoint'

Где EntryPoint - это имя, которое вы хотите для модуля.

Итак:

output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'app.bundle.js',
    libraryTarget: 'var',
    library: 'MyModule'
  },

И это должно позволить вам просто позвонить

EntryPoint.send("asd qweqwe");