typescript - 无法从非标准位置读取源映射
问题描述
当我的源/包位于非标准位置时,我无法让源映射与 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/**/*"
]
}
默认.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/**/*"
]
}
默认.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;博士
如果我仅在以下位置更改路径,我的源地图会中断:
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/**/*"
]
默认.aspx
<script type="text/javascript" src="./[Scripts/]dist/bundle.js"></script>
我还需要改变什么?
解决方案
当我尝试直接浏览到地图文件时,我收到了 500.19 配置错误:
此配置部分不能在此路径中使用。当该部分锁定在父级别时会发生这种情况。锁定是默认情况下 (overrideModeDefault="Deny") 或由具有 overrideMode="Deny" 或旧 allowOverride="false" 的位置标记显式设置的。
查看我的 Web.config 文件,我注意到我们有以下配置部分:
<location path="Scripts">
<system.webServer>
<security>
<authentication>
<anonymousAuthentication enabled="true" />
</authentication>
</security>
</system.webServer>
<system.web>
<authorization>
<allow users="?" />
</authorization>
</system.web>
</location>
删除它消除了问题。但是,我们需要此部分来处理应用程序的其他部分。因此,我转而<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
)
这令人满意地解决了这个问题。
推荐阅读
- sql - 附加条件with partition over
- amazon-web-services - AWS - 自定义令牌到期时间
- c++ - 验证消息签名产生 HEADER TOO LONG 错误
- c# - 我可以使用函数指针跨编程语言边界调用函数吗?
- azure - 使用 LinuxDiagnostic 扩展设置 azure 虚拟机规模集
- r - 提取R中的更改持续时间
- amazon-web-services - 在 AWS EKS 平台上使用 Cloudflare 安装 Jenkins X
- caching - Yii2 只为一个请求缓存数据库值
- javascript - 通过 Laravel 5.7 PHP 加密对象并通过 VueJS Javascript 解密
- javascript - spacify,改变背景和移动调整JS