标签: source-maps

在IE中不起作用// @ sourceURL.

appLoader.loadScriptContent(doc, scriptData.data + "//@ sourceURL=" + scriptData.url );

在另一个浏览器中它没关系.如何在IE中更改此代码？

我正在使用grunt 0.4.2和grunt-contrib-less 0.9.0.我希望将LESS编译成支持源映射的CSS.

我的LESS文件在public/less,并且主要文件被调用main.less.

编译public/less/main.less成public/css/main.css工作,但源地图不起作用.

我的Grunt配置有什么问题？

{
    less: {
        dev: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2,
                sourceMap: true,
                sourceMapFilename: "public/css/main.css.source-map.json", //Write the source map to a separate file with the given filename.
                sourceMapBasepath: "public/less", //Sets the base path for the Less file paths in the source map.
                sourceMapRootpath: "/"//Adds this path onto the Less file paths in the source map.
            },
            files: {
                "public/css/main.css": "public/less/main.less"
            }
        }
    },
    watch: …

我有一个es6项目,我使用webpack + babel loader捆绑.当我打开devtools时,我可以看到'webpack://'和我下面的所有源(es6).

问题是:断点没有命中,函数引用将我引导到文件名'？d41d

其中包含以下内容:

undefined


/** WEBPACK FOOTER **
 ** 
 **/

如果我从文档脚本向下钻取到我的包中的函数,我也可以访问？d41d文件

我的webpack.config.js:

module.exports = {

    debug: true,
    devtool: 'cheap-module-eval-source-map',
    entry: "entry.js",
    output: {
        path: "C:/html5/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ['transform-object-assign'],
                    sourceMaps: ['inline']
                }
            }
        ]
    }
};

和package.json的一部分,以防它可能有所帮助:

"devDependencies": {
    "ava": "^0.16.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-preset-es2015": "^6.13.2",
    "cheerio": "^0.22.0",
    "chokidar-cli": "^1.2.0",
    "eslint": "^3.3.1",
    "html-to-js": "0.0.1",
    "jsdoc": "^3.4.0",
    "jsdom": "^9.4.2", …

我决定尝试一个新项目的WebPack,我今天正在开发,我从源图中得到了非常奇怪的行为.我在文档中找不到任何相关内容,在浏览StackOverflow时也无法找到其他任何人遇到此问题.

我目前正在查看由Vue-CLI的WebPack模板生成的HelloWorld应用程序- 没有对代码,构建环境或任何内容进行任何更改.

我安装了所有东西并像这样运行:

vue init webpack test && cd test && npm install && npm run dev

查看我的源图,我看到以下内容:

这是一个热点.为什么有三个版本HelloWorld.vue和App.vue？更糟糕的是,每个版本的代码版本略有不同,并且没有一个版本与原始源代码匹配.将HellowWorld.vue在根目录下坐着不匹配原始来源,但它是什么的做的,而不是那里./src/components的文件夹？最后,为什么没有第四个App.vue拥有它的原始来源？

据我所知,这可能与WebPack加载器有关.但是,我从来没有遇到任何其他捆绑包的这类问题.以下是使用Browserify Vue-CLI模板执行完全相同步骤的示例:

没有webpack://架构,只有每个文件的一个副本,文件实际上包含原始源代码(对于源映射很重要),没有意外(webpack)/buildin或(webpack)-hot-middleware没有.子目录,....只是源代码.

设置源地图的方法有两种：将其托管在站点上并在捆绑的文件中引用，或者将其直接上传到哨兵之类的服务中。我正在尝试完成后者。问题在于，如果没有将文件路径写入捆绑文件，似乎就无法使用angular cli生成源地图。

我的第一个想法是拥有两个版本-一个带有源映射生成，另一个不带。然后，我只部署没有源映射的构建，并将包含它们的构建上载到哨兵。那是行不通的，因为包的文件名是不同的（角度cli使用文件哈希作为缓存清除的文件名，当您生成源地图时，它将路径添加到.map文件作为注释的末尾，从而导致哈希和文档名称）。

我的另一个选择是使用源地图进行构建，将其上传到哨兵，然后在部署站点之前删除地图文件。那里的问题是捆绑文件仍然包含对现在不存在的映射文件的引用。这本身不应该是一个问题，但是它可能会引起扩展程序或浏览器的问题，并且似乎是一个棘手的解决方案。

您将如何在构建过程中实施类似的操作？

我使用 webpack v4.16.2 作为我的捆绑工具，并设置devtool为'source-map'. 我正在尝试通过 Chrome 源选项卡调试源文件。但是，当我单击源文件躺下webpack://目录时，出现错误：

我没有使用webpack-dev-server，只是将源文件构建到文件dist/夹中，然后通过 Nginx 加载页面。

这个错误是什么意思？我很确定源映射文件已生成。我怎样才能解决这个问题？

提前致谢。

是否可以加载外部源映射文件(JSON),不包含在网站上使用的缩小JS文件中？

到目前为止,我知道包含特定js文件的源映射的唯一方法是内联它,在注释中添加链接或在HTTP头中设置路径.

所以我想知道 - 是否可以加载无法通过HTTP访问的源映射文件？例如 - 从我的本地驱动器加载它,并将其指向它应该映射的js文件？

干杯

我的反应文件夹结构如下

我没有使用create-react-app版本.我试过用GENERATE_SOURCEMAP=false.但它没有用.

我在哪里可以找到.map文件.我该如何删除这些文件？

我找不到构建文件夹.我尝试使用下面的脚本但它无法删除源地图

 "scripts": {

    "start": "react-scripts start",
   "build": "GENERATE_SOURCEMAP=false && npm run build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

我一直在使用 Angular 项目，Angular 版本是 13，Node 版本是 16。

当我使用命令时npm run start，它会抛出错误（编译错误）。粘贴下面的错误

Error: Content and Map of this Source is not available (only size() is supported)
    at SizeOnlySource._error (C:\Users\proj\node_modules\webpack-sources\lib\SizeOnlySource.js:16:10)
    at SizeOnlySource.buffer (C:\Users\proj\node_modules\webpack-sources\lib\SizeOnlySource.js:30:14)
    at _isSourceEqual (C:\Users\proj\node_modules\webpack\lib\util\source.js:21:51)
    at isSourceEqual (C:\Users\proj\node_modules\webpack\lib\util\source.js:43:17)
    at Compilation.emitAsset (C:\Users\proj\node_modules\webpack\lib\Compilation.js:4171:9)
    at C:\Users\proj\node_modules\webpack\lib\Compiler.js:548:28
    at C:\Users\proj\node_modules\webpack\lib\Compiler.js:1129:17
    at eval (eval at create (C:\Users\proj\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

我已经尝试过这些解决方案。它们都不是永久的解决方案。

1. 从项目中删除 .angular 文件夹并运行npm install，然后运行 ​​npm run start命令

2. 将sourceMap标志设置为false

3. 尝试使用npm install命令安装sourceMap