.NET Core с Webpack 4 - как получить доступ к модулю javascript с точки зрения бритвы? - PullRequest
Новая
       19

.NET Core с Webpack 4 - как получить доступ к модулю javascript с точки зрения бритвы?

0 голосов
/ 22 октября 2018

Я искал повсюду и не могу понять, как я это делаю.Надеюсь, у кого-то есть правильный ответ ...

Я создал новое веб-приложение .NET Core 2.1 с c # и Razor Views.Я опытный в MVC, но плохо знаком с .NET Core и особенно с понятием webpack.Раньше я использовал requireJS для пакетирования и обработки модулей, теперь я использую веб-пакет для создания своих пакетов.

Каждый пример веб-пакета, который я видел, включает в себя ссылку на пакет из ракурса бритвы - т. Е. <script src="~/dist/app.bundle.js"></script>, и все делается в скрипте.

Мой вопрос - как мне получить доступ к объекту в этом комплекте или, что более важно, передать ему некоторые параметры?То, что я хочу сделать, это что-то вроде этого:

Это будет app.js, который компилируется в app.bundle.js с веб-пакетом: 

export default class ES6Lib {
    constructor(userName) {
        this.text = "<h1>Hello there, " + userName + "!</h1>"; 
    }
    getData() {        
        return this.text;
    }
}

В основном я хочу в моей конкретной Razorпросмотрите (не только _Layout.cshtml), чтобы включить этот пакет и код, и создайте его экземпляр, чтобы я мог передать значение со стороны сервера, в этом случае userName будет получено с сервера.

Что-то вроде: 

<script src="app.bundle.js"></script>
<script>
    var userName = '@Model.UserName'; // from server = 'Jesse'
    var myClass = new ES6Lib(userName); // pass in a parameter
    var greeting = myClass.getData(); // run a function

    console.log(greeting); // prints 'Hello there, Jesse!'
</script>

Очевидно, что это не работает - но как, черт возьми, я могу создать экземпляр объекта из модуля и передать в него значение?Или как мне построить правильный модуль, который можно использовать таким образом?

Некоторые примеры были бы очень, очень полезны.Спасибо!

1 Ответ

0 голосов
/ 22 октября 2018

Вы можете просто попросить Webpack создать библиотеку, установив library в webpack.config.js: 

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "..", 'wwwroot/js'),
        filename: 'app.bundle.js',
        library: 'OurLibrary',
    },
};

Это сгенерирует библиотеку с именем OurLibrary, которая выставляет эти свойства "экспортированными"в нашем module: 

// exports the default as `ES6Lib`
export default class ES6Lib {
    constructor(userName) {
        this.text = "<h1>Hello there, " + userName + "!</h1>"; 
    }
    getData() {        
        return this.text;
    }
}

// exports the answer
export function answer(){
    return 42;
}

(обратите внимание на export default в вашем коде javasript.)

, и теперь вы можете использовать его в представлениях: 

<script src="~/js/app.bundle.js"></script>
<script>
    var ES6Lib= OurLibrary.default;
    var userName = '@Model.UserName'; // from server = 'Jesse'
    var myClass = new ES6Lib(userName); // pass in a parameter
    var greeting = myClass.getData(); // run a function

    console.log(greeting); // prints 'Hello there, Jesse!'

    console.log(OurLibrary.answer()); // prints 42
</script>
...