Question

我参与了一个React项目，并且我将它作为一个asp.Net核心应用程序。我知道webpack要捆绑文件，在我的情况下我需要捆绑一些jsx文件。我查看了ReactJS.Net's own site和this Youtube video等的一些指南和教程。到目前为止，我的索引文件是Index.cshtml：

@{
    Layout = null;
}
<html>
<head>
    <title>Hello React</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

然后通过node.js中的npm init - 命令创建了一个package.json，其中包含除名称之外的所有默认道具：

{
  "name": "marck",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel": "babel",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.14.0"
  }
}

创建了webpack.config.js - 文件：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './app.jsx',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
};

最后我创建了app.jsx - 我希望捆绑在webpack中的文件，它是来自ReactJS.Net示例的代码：

import React from 'react'
import ReactDOM from 'react-dom'

var CommentBox = React.createClass({
    render: function() {
        return (
          <div className="commentBox">
            Hello, world! I am a CommentBox.
          </div>
      );
    }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

当我在node.js命令提示符下运行webpack时，它说：

    Assets   Size   Chunks           Chunk Names
bundle.js   740 kb       0 [emitted] main
    + 179 hidden modules

所以看起来它捆绑了什么或者我错了？当我尝试运行它时，它在浏览器中给我这个GET错误

GET http://localhost:9217/bundle.js

而且：

    [15:22:51 GMT+0100 (Romance Standard Time)] Browser Link: Failed to invoke return value callback:
TypeError: Cannot read property 'files' of null

我的文件夹设置如下：

Solution 'webpack'
>Solution Items
>src
  >webpack
  >wwwroot
  >Dependencies
  >Controllers
  >Views
    >Home
      Index.cshtml
  app.config
  app.jsx
  appsettings.json
  bundle.js
  package.json
  program.cs
  >project.json
  Startup.cs
  web.config
  webpack.config.js

我希望你们中的一些人可以告诉我我需要做些什么才能让它发挥作用，因为我认为文档和指南并不是一直都很清楚。每个人都有不同的方式去做，现在我有点困惑。

修改

我发现，当它是asp.Net Core applikation时，applikation只会在wwwroot - 文件夹中查找，所以我尝试将bundle.js - 在该文件夹中的文件，然后将我的Index.cshtml - 文件中的方向更改为该文件，然后它就可以了。我希望这会有助于其他人：）

无法在Index.cshtml中加载webpack

0 个答案: