javascript - Fusebox 无法识别 sourceRoot 的属性设置

Question

我继承了一些我无法更改的 javaScript/typeScript 代码。

使用：

• 保险丝 v0.4.0
• 保险丝盒 v4.0.0,
• 打字稿4.1.3
• 我正在生成一个 bundle & sourceMap (bundle.js, bundle.js.map)

此 sourceMap 有效，但仅当我对 bundle.js.map 中的“源”进行文本替换时

• 发现 :src/

  • {"版本":3,"来源":["/src/lib/development.ts","/src/lib/server.ts"

• 替换为：../../

  • {"version":3,"sources":["../../lib/development.ts","../../lib/server.ts"

根据文档，我应该能够在 fuse.js 中设置 sourceRoot 属性。但无论我设置什么值，bundle.js.map 的输出都不会受到影响。

我的文件夹树如下所示：

我的 fuse.js 看起来像这样：

task('default', async () => {
    const fuse = FuseBox.init({
        allowSyntheticDefaultImports: true,
        homeDir: '.',
        output: 'build/$name.js',
        target: 'universal',
        sourceMaps: { inline: false, sourceRoot: "" },
//        sourceMaps: { sourceRoot: "/src" }, 
//        sourceMaps: { sourceRoot: "/../.." },
//        sourceMaps: { sourceRoot: "test" }, 
        plugins: [
            EnvPlugin({
                DB_HOST: '127.0.0.1',
                DB_USER: 'appadmin',
                DB_PASSWORD: 'password',
                NODE_ENV: 'development',
                REDIS_HOST: '192.168.100.17',
                REDIS_PORT: '6379'
            }),
            [
                CSSResourcePlugin({
                    inline: true
                }),
                CSSPlugin()
            ],
            ImageBase64Plugin(),
            JSONPlugin(),
            RawPlugin(['.dot']),
            SVGPlugin(),
            WebIndexPlugin({
                bundles: ['client/vendors', 'client/app'],
                template: 'public/index.html'
            })
        ]
    })

    fuse.register('fbjs', {
        main: 'index.js',
        homeDir: 'node_modules/fbjs',
        instructions: ' '
    })

    fuse.bundle('client/vendors')
        .target('browser@es5')
        .watch("client/vendors/**")
        .hmr({ reload: true })
        .instructions('~ client/index.tsx')

    fuse.bundle('client/app')
        .target('browser@es5')
        .watch("client/**")
        .hmr({ reload: true })
        .instructions('> [client/index.tsx]')

    fuse.bundle('server/bundle')
        .target('server@esnext')
        .watch('server/**')
        .instructions('> [lib/development.ts]')
        .completed(process => process.start())

    fuse.dev()

    await fuse.run()
})

task('production', async () => {
    const client = FuseBox.init({
        allowSyntheticDefaultImports: true,
        homeDir: '.',
        output: 'build/$name.js',
        target: 'browser@es5',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'production'
            }),
            [
                CSSResourcePlugin({
                    inline: true
                }),
                CSSPlugin()
            ],
            ImageBase64Plugin(),
            JSONPlugin(),
            SVGPlugin(),
            WebIndexPlugin({
                template: 'public/index.html'
            }),
            QuantumPlugin({
                bakeApiIntoBundle: true
            })
        ]
    })

    const server = FuseBox.init({
        homeDir: '.',
        output: 'build/$name.js',
        target: 'server@esnext',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'production'
            }),
            RawPlugin(['.dot']),
            QuantumPlugin({
                bakeApiIntoBundle: true,
                containedAPI: true,
                replaceProcessEnv: false
            })
        ]
    })

    client.bundle('client/vendors').instructions('~ client/index.tsx')
    client.bundle('client/app').instructions('!> [client/index.tsx]')
    server.bundle('server/bundle').instructions('!> [lib/production.ts]')

    await client.run()
    await server.run()
})

task('generate-schema', async () => {
    const fuse = FuseBox.init({
        homeDir: '.',
        output: 'build/$name.js',
        target: 'server@esnext',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'development'
            })
        ]
    })

    fuse.bundle('generate-schema')
        .target('server@esnext')
        .instructions('> [lib/generateSchema.ts]')
        .completed(process => process.start())

    await fuse.run()
})

task('generate-data', async () => {
    const commandOptions = process.argv
    commandOptions.shift()
    commandOptions.shift()

    const fuse = FuseBox.init({
        homeDir: '.',
        output: 'build/$name.js',
        target: 'server@esnext',
        plugins: [
            EnvPlugin({
                NODE_ENV: 'development'
            })
        ]
    })

    fuse.bundle('generate-data')
        .target('server@esnext')
        .instructions('> [lib/generateData.ts]')
        .completed(process => process.start(commandOptions))

    await fuse.run()
})
'''

标签： javascripttypescriptdebuggingsource-mapsfusebox