道招

怎么调试Webpack+React项目,报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

怎么调试Webpack+React项目,报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办

今天在WebStorm上Windows上准备调试一个React项目,就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件.\node_modules\.bin\webpack-dev-server.cmd,用的是相对当前工作空间Working directory的相对路径。

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^
SyntaxError:missing ) after argument list     

file

之前一直在Mac都是类似这么写的,怎么会报错呢?

在Mac上不存在这样的问题 file

只能换一个思路试试了,我们执行npm instal --save-dev webpack-dev-server时是会在node_modules文件夹创建两个东西的

  1. node_modules文件夹里面会有webpack-dev-server文件夹
  2. node_modules文件夹的.bin文件夹里面会有webpack-dev-server执行文件

.bin文件里面的执行文件最终还是会执行其对应node_modules文件里面的webpack-dev-server文件内容的,可以查看此执行文件得知这一点。 file

其实执行 ./node_modules/.bin/webpack-dev-server.cmd 其实就是执行/node_modules/webpack-dev-server/bin/webpack-dev-server.js

之所以在Windows上报错,我想是因为Windows不支持shell脚本语句所导致,而Mac上支持shell脚本

一开始提到的报错也是显示是这个文件报错了,既然如此,我们为什么不试试直接执行node_modules/webpack-dev-server里面的文件呢?

将Node Parameters里面写成.\node_modules\webpack-dev-server\bin\webpack-dev-server.js可以成功调试了。

简单总结下

  1. webpack本质也是JavaScript项目,我们同样可以使用类似node xxx.js的方式来运行和调试webpack。
  2. 我们安装在package.json的'devDependencies'里面的依赖包有两种运行方式:
    1. 使用快捷方式: ./node_modules/.bin/webpack-dev-server.cmd
    2. 使用完整路径方式: .\node_modules\webpack-dev-server\bin\webpack-dev-server.js

PS: 开发童鞋喜欢用Mac,并不是为了装X,Mac的类unix的命令行就是很爽,少一堆问题。

更新时间:
上一篇:React router用hooks读取routeName、根据routeName跳转下一篇:react router页面跳转二次确认弹框及样式、业务逻辑自定义

相关文章

以webpack为例来看微内核架构

微内核系统一般分为两个部分—— 核心系统 和 插件系统 ,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如 阅读更多…

回顾下跨域解决方案http-proxy-middleware

我们在React(或Vue)项目本地开发过程中很容易由前端自己解决跨域问题,这里面就用到的是插件 http-proxy-middleware ,它并不是webpack独享的插件,而是一个通用插件,它 阅读更多…

从vuecli3学习webpack记录(三)基类Tapable和Hook分析

在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',( 阅读更多…

从vuecli3学习webpack记录(四)vue是怎么进行默认配置的

在我们讲到 从vuecli3学习webpack记录(一)vue-cli-serve机制 vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在 阅读更多…

修改Eclipse ADT default debug keystore路径

我用的是Windows7,而我又喜欢将所有可以设置的用户文件的位置改至F盘下。这样在用Eclipse或者从命令行创建Android Emulator时,相应的文件是被放置到 “F:/Users/&lt 阅读更多…

用webpack的require.context优化vue store和router文件

早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 store 阅读更多…

关注道招网公众帐号
联系博主