Question

当我的源代码/捆绑包位于非标准位置时，我很难使源代码映射与Webpack和TypeScript一起使用。如果它们位于标准./src和./dist文件夹中，则一切正常。如果我分别将源文件移动到./Scripts/src和./Scripts/dist并从中引用我的捆绑软件，则会出现以下错误：

SourceMap http://localhost:56154/Scripts/dist/bundle.js.map read failed: One or more errors occurred..

在工作与不工作之间进行的唯一更改是Scripts目录。

具体来说，以下是更改前后的相关文件：

（工作之前）

webpack.config.js

'use strict';

const path = require('path');

module.exports = {
    mode: 'development',
    context: path.resolve(__dirname, 'src'),
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    entry: "./index.tsx",
    output: {
        publicPath: '/dist/',
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es5", "es6", "dom"],
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    ...
</head>
<body>
    ...

    <div id="example"></div>

    <!-- Dependencies -->
    <script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>
    <script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <!-- Main -->
    <script type="text/javascript" src="./dist/bundle.js"></script>

</body>
</html>

之后

webpack.config.js

'use strict';

const path = require('path');

module.exports = {
    mode: 'development',
    context: path.resolve(__dirname, 'Scripts/src'),
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    entry: "./index.tsx",
    output: {
        publicPath: '/Scripts/dist/',
        path: path.resolve(__dirname, './Scripts/dist'),
        filename: 'bundle.js'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./Scripts/dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es5", "es6", "dom"],
        "jsx": "react"
    },
    "include": [
        "./Scripts/src/**/*"
    ]
}

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    ...
</head>
<body>
    ...

    <div id="example"></div>

    <!-- Dependencies -->
    <script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>
    <script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <!-- Main -->
    <script type="text/javascript" src="./Scripts/dist/bundle.js"></script>

</body>
</html>

TL; DR

如果仅在以下位置更改路径，则源地图将断开：

webpack.config.js

context: path.resolve(__dirname, '[Scripts/]src'),
output: {
    publicPath: '/[Scripts/]dist/',
    path: path.resolve(__dirname, './[Scripts/]dist')
}

tsconfig.json

"compilerOptions": {
    "outDir": "./[Scripts/]dist/"
},
"include": [
    "./[Scripts/]src/**/*"
]

Default.aspx

<script type="text/javascript" src="./[Scripts/]dist/bundle.js"></script>

我还需要更改什么？

Answer 1

当我尝试直接浏览到地图文件时，出现500.19配置错误：

此配置部分不能在此路径上使用。当节锁定在父级时，会发生这种情况。锁定默认情况下是（overrideModeDefault =“ Deny”），或者是由具有overrideMode =“ Deny”或旧版allowOverride =“ false”的位置标记明确设置的。

在我的Web.config文件中，我注意到我们有以下config部分：

<location path="Scripts">
  <system.webServer>
    <security>
      <authentication>
        <anonymousAuthentication enabled="true" />
      </authentication>
    </security>
  </system.webServer>
  <system.web>
    <authorization>
      <allow users="?" />
    </authorization>
  </system.web>
</location>

Removing消除了问题。但是，我们需要此部分与应用程序的其他部分一起工作。因此，我去了<solutionDir>\.vs\config\applicationhost.config并进行了以下更改：

设置configuration/configSections/sectionGroup[name="system.webServer"]/sectionGroup[name="security"]/sectionGroup[name="authentication"]/section[name="anonymousAuthentication", overrideModeDefault="allow"]（原为"deny"）
最后，设置configuration/location[path=<webAppProject>]/system.webServer/security/authentication/anonymousAuthentication[enabled="true"]（原为false）

这可以令人满意地解决该问题。

无法从非标准位置读取源地图

1 个答案: