Webpack 踩坑之旅

阳光穿透心脏的1/2处 2022-11-27 12:08 239阅读 0赞

## node\_modules包不编译 ##

一般情况下，node\_modules安装的包都已经被打包为CommonJS规范的代码，代码的入口文件由包下package.json的main字段，如果你发现node\_modules安装的包不是ES5语法（如使用了class，使用了jsx），那么你完了，你将无法通过编译，因为babel7以上会默认不编译node\_modules目录下的代码（大多数情况下，我们的webpack的配置也是不打包node\_modules目录的），所以我们需要配置include字段，包含我们要打包的目录

include: [
        paths.appSrc,
        path.resolve('node_modules/react-native-webview/')
      ],

## 不要在package.json中配置babel ##

在package.json中配置babel让我遇到了一些奇葩的错误，还是使用官方的配置文件babel.config.js配置比较好，如下赠送一个示例：

module.exports = { 
        presets: [
            "react-app",
            "module:metro-react-native-babel-preset"
        ],
        plugins: [
            [
                "module-resolver",
                { 
                    "root": [
                        "src/Common",
                        "src/RNApp",
                        "src/WebApp"
                    ],
                    "extensions": [
                        ".js",
                        ".jsx",
                        ".ts",
                        ".tsx"
                    ]
                }
            ]
        ]
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关踩坑记之字体图标在webpack中

首先介绍一个还不错的字体图标库： font-awesome 是在发现bootstrap在npm下载后没有font包以后重新找的字体库，内容还挺丰富的，好像还有动态图，感兴趣

àì夳堔傛蜴生んèń/ 2023年08月17日 17:23/ 0 赞/ 96 阅读

相关 uni-app踩坑之旅

这里总结的踩坑记录大部分都是app端的兼容问题，H5端基本都不会出现，小程序端还没尝试，后续增加。如有错误，欢迎指正一、环境类 1、h5环境下vue.config.

心已赠人/ 2023年03月03日 14:24/ 0 赞/ 18 阅读

相关 webpack5 踩坑日记（持续更新~~）

文章目录前言一、打包图片资源时问题1：

Love The Way You Lie/ 2022年12月26日 15:21/ 0 赞/ 364 阅读

相关 NSIS + QT 制作安装包的踩坑之旅

本次安装包的实现方式：NSIS + QT（DLL） NSIS的功能：实现安装逻辑 DLL的功能：提供QT编写的界面给NSIS调用首先遇到的一个问题：如何在DLL中如

╰半橙微兮°/ 2022年12月03日 05:19/ 0 赞/ 315 阅读

相关 ReactNative 踩坑之旅

样式要从StyleSheet.create创建不要使用如下的样式原因：性能 <Text style={ { ...}}>{ data.smallText

叁歲伎倆/ 2022年12月01日 05:22/ 0 赞/ 211 阅读

相关 Webpack 踩坑之旅

node\_modules包不编译一般情况下，node\_modules安装的包都已经被打包为CommonJS规范的代码，代码的入口文件由包下package.json的

阳光穿透心脏的1/2处/ 2022年11月27日 12:08/ 0 赞/ 240 阅读

相关 Webpack5 踩坑之（html-webpack-plugin）

2021 开工第一天就给我个大大的惊喜。 ERROR in Error: The loader "/home/project/vue3-demo/node_mod

秒速五厘米/ 2022年10月30日 07:27/ 0 赞/ 328 阅读

相关 Node.js踩坑之旅（一）

我作为一个初学者，在看书写代码的时候难免会遇到一些坑，我想把自己经历的大大小小的一些坑写出来。不仅提醒自己，也是给同处相同学习阶段的人的小小的分享。这几天看了看node.j

谁借莪１个温暖的怀抱￠/ 2022年03月25日 11:16/ 0 赞/ 262 阅读

相关 Vue踩坑之旅——Vuex

问题：某个组件在周期mounted中调用了使用computed属性getter来的全局变量，该全局变量为异步请求的数据，在非路由进入页面即刷新该页面时跳过了store的inde

阳光穿透心脏的1/2处/ 2022年01月19日 01:55/ 0 赞/ 322 阅读

相关 Vue踩坑之旅（三）—— 修改子组件样式

在vue组件中为 `<style>` 标签开启 `scoped` 属性，这样样式只作用于这个组件，而不会污染其他组件。在项目中，我们经常要引入外部的 UI 组件（如 ele

爱被打了一巴掌/ 2022年01月12日 02:37/ 0 赞/ 1180 阅读