Использование Imports с .Net, React.Js и Url.Content - PullRequest
Новая
       15

Использование Imports с .Net, React.Js и Url.Content

0 голосов
/ 08 марта 2019

Я использую .Net MVC Framework и пытаюсь отобразить файл jsx (React), который имеет импорт.Я включаю этот файл в страницу бритвы (cshtml) через стандартное внедрение Url.Content следующим образом: 

<script src="@Url.Content("~/js/queue/QueueIndex.js")"></script>
<script>
    ReactDOM.render(React.createElement(QueueIndex), document.getElementById("queue-index"));

    jQuery(window).on("load scroll", function () {
        'use strict'; // Start of use strict
        // Loader
        $("#dvLoading").fadeOut("fast");
    });
</script>

Если у меня нет импорта вверху моего файла React (QueueIndex.jsx)страница загружается просто отлично.Тем не менее, я хотел бы импортировать пакет реагирующих таблиц, но если включить в мой файл QueueIndex.jsx какие-либо операции импорта, разрыв страницы.

Я получаю сообщение об ошибке «Требуется, не определено».

Я думаю, что решение где-то в использовании веб-пакета, вот мой конфиг: 

const webpack = require("webpack");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: {
    nhqueue: './wwwroot/js/queue/QueueIndex.jsx'
},
output: {
    path: __dirname + '/wwwroot/js/',
    publicPath: '/wwwroot/js/',
    filename: '[name].bundle.js'
},
module: {
    preLoaders: [
    ],
    loaders: [
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        { test: /\.tsx?$/, loaders: ['babel', 'ts'] },
        { test: /\.json$ /, loader: "json-loader" },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: "babel",
            query:
            {
                presets: ['react']
            }
        }
    ],
    externals: {
        "moment": "moment",
    },
},
devtool: 'source-map',
target: 'web',
plugins: [
    new CleanWebpackPlugin(['./wwwroot/js/*.js'], {
        root: __dirname,
        verbose: true,
        dry: false
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production')
        }
    }),
    new webpack.optimize.UglifyJsPlugin()
],
resolve: {
    extensions: ['', '.jsx', '.js', '.tsx', '.ts']
},
node: {
    fs: "empty",
    child_process: "empty"
}
}

К сожалению, мне там не повезло.Пожалуйста, дайте мне знать, если у вас есть идеи, как решить эту проблему.Спасибо!

Также вот конфигурация Babel: 

{"presets" : ["es2015", "react"]}
...