我正在用webpack构建两个项目;一个是另一个的图书馆.

在构建包装器项目时,是否可以使用我的库项目中的sourcemaps?我希望能够从包装器UI调试库代码.

我的构建工作正常,因为库是内置的.唯一的问题是源 map .我在浏览器调试器中看到的JavaScript是丑陋的,因为sourcemaps不可用.

我的项目 struct 片段:

+-- my-ui/
    +-- dist/
        +-- my-ui.js
        +-- my-ui.js.map
    +-- node_modules/
        +-- my-lib/
            +-- dist/
                +-- bundle.js
                +-- bundle.js.map

来自webpack.config.js的片段:

module.exports = {
    entry: './src/js/main.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'my-ui.js',
        library: 'my-ui',
        libraryTarget: 'umd'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')}
        ]
    },
    plugins: [
        new Clean('dist'),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inject: true
        })
    ]
};

推荐答案

我终于解决了我的问题...

感谢@BinaryMuse提供关于source-map-loader的提示.这的确是正确的 Select ,尽管一开始对我来说并不奏效.

我最终意识到,我需要在"my lib"和"my ui"中启用source-map-loader for webpack.如果"my lib"网页包配置中没有source-map-loader,则"my ui"中的source-map-loader会出现错误(遗憾的是会显示一条警告消息),因为它无法找到"my lib"可传递依赖项的源映射.显然,源映射非常好,source-map-loader能够窥视依赖树的各个方面.

同样值得注意的是,我在使用source-map-loaderreact-hot-loader时遇到了一个问题.参见,react-hot-loader不包括源 map .当source-map-loader试图找到它们时(因为它只是扫描所有内容),它无法找到并中止所有内容.

最终,我希望source-map-loader更具容错性,但如果设置正确,它确实有效!

devtool: 'source-map',
module: {
    preLoaders: [
        {test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/},
        {test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/}
    ],
    loaders: [
        {test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/}
    ]
}

Reactjs相关问答推荐

ReferenceError:未在Redux组件中定义窗口

下拉Tailwind CSS菜单与怪异beviour

App.js中的H2组件不会动态呈现.这可能是什么问题?

可以使用mode.css/mode.scss引用常规的类名吗?

用于获取带有事件处理程序的API的动态路由

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

tRPC/react-query,在所有查询完成之前,组件不会收到任何 useQuery 的结果

通过createRoot创建的React元素无法调用Provider值

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

Zod 验证模式根据另一个数组字段使字段成为必需字段

在复选框中react 检索选中的值

Material UI:使用 mui 手风琴时出现props 类型失败:isValidElement 不是函数

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

我刚刚部署了我的 Vite React 站点,但我的图标/图像没有部署

如何从其他组件访问 useQuery refetch 方法?

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

将 dict 值转换并插入到react 钩子的列表中

如何在 Reactjs 中判断受保护路由上的用户角色?

在 React 中使用使用状态挂钩合并两个数组

单击按钮时获取react 表中每一行的属性