跑npm scripts的方式指的是什么

发布时间：2023-08-02 11:00:47 所属栏目：教程来源：转载

导读： 　　这篇文章主要介绍了跑npm scripts的方式是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇跑npm scripts的方式是什么文章都会有所收获，下面我们一

　　这篇文章主要介绍了跑npm scripts的方式是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇跑npm scripts的方式是什么文章都会有所收获，下面我们一起来看看吧。

　　每个前端项目都有 npm scripts，我们会用 npm scripts 来组织编译、打包、lint 等任务。

　　这些命令行工具的 package.json 里都会有个 bin 字段，来声明有哪些命令：

　　npm install 这个包以后，就会放到 node_modules/.bin 目录下：

　　这样我们就可以通过 node ./node_modules/.bin/xx 来跑不同的工具了。

　　我们也可以用 npx 来跑，比如 npx xx，它的作用就是执行 node_modules/.bin 下的本地命令，如果没有的话会从 npm 下载然后执行。

　　当然，最常用的还是放到 npm scripts 里：

　　这样就直接 npm run xxx 跑就行了。

　　npm scripts 本质上还是用 node 来跑这些 script 代码，所以调试他们和调试其他 node 代码没啥区别。

　　也就是可以这样跑：

　　在 .vscode/launch.json 的调试文件里，选择 node 的 launch program：

　　用 node 执行 node_modules/.bin 下的文件，传入参数即可：

　　其实还有更简单的方式，VSCode Debugger 对 npm scripts 调试的场景做了封装，可以直接选择 npm 类型的调试配置：

　　直接指定运行的命令即可：

　　比如我们就用这个 create-react-app 创建的 react 项目来尝试下 npm scripts 的调试：

　　先去 node_modules/.bin 下这个文件里打个断点：

　　然后点击 debug 启动：

　　你会发现会执行 scripts 下的 start 模块：

　　我们再去 start 下打个断点：

　　代码执行到这里断住：

　　这个 config 就是 webpack 的配置：

　　再往下走，会发现启动了一个 server：

　　我们在 server 启动的回调函数里打个断点，看看浏览器是怎么打开的：

　　点击 step into 进入这个断点，然后单步执行，会走到这样的代码：

　　依次通过 osascript 来启动这些浏览器，启动失败的话，try catch 里直接忽略了：

　　这些浏览器 hover 上去就可以看到：

　　释放断点，你就会发现浏览器打开了

　　这样，我们不就梳理了一遍 react-scripts start 的流程么？

　　总结一下就是这样的：

　　根据输入的 start 命令，执行 scripts/start 模块

　　根据配置，创建 webpack 的 Compiler 对象

　　创建 WebpackDevServer

　　server 启动之后，启动浏览器打开 url

　　打开 url 的实现就是通过 osascripts 依次尝试那些浏览器

　　这样调试完一遍，我们就对 npm run start 有了更深入的认识。

　　而且，调试的方式跑 script 和直接命令行 npm run start 没啥区别。

　　要说区别，唯一的区别可能就是这个：

　　默认调试模式下，输出的内容会在 Debug Console 面板显示：

　　但这个也可以改：

　　可以切换成 integratedTerminal，那就会输出在 terminal 了：

　　这样就和平时 npm run start 执行没了任何区别，而且还可以断点调试，它不香么？

　　我们再来看个例子，比如 vue cli 创建的 vue 项目，在 vue.config.js 里可以改 webpack 配置：

　　但如果你想知道默认的配置是啥呢？console.log 么？

　　console.log 打印大对象可不是个好主意，它是这样的：

　　有的同学说用 JSON.stringify，那个更难看，特别长的一串。

　　如果你会了调试 npm scripts 呢？

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!