VS Code + webpack 调式 lodash 源码（如何用VS Code调式ES6代码）

SHERlocked93 发布于2019-08-21 18:27 / 3079人阅读

摘要：有限制就不灵活了，看源码文件，两百多个源码文件都是语法，文件名称是，想在中直接启动调式是不行的，还是需要用到才行。使用环境调式使得效率更高，直接再中阅读源码，直接调式看效果。

文章首发：https://github.com/giscafer/g...

前言

node.js在 v8.5 版本之后可以直接支持ES6模块，但是有个限制就是，需要为.mjs后缀的文件才行，比如有个es6代码文件为test.mjs，可以直接用node.js运行调式： node --experimental-modules test.mjs。

有限制就不灵活了，看lodash源码文件，两百多个源码文件都是ES6语法，文件名称是.js，想在VS Code中直接node启动调式是不行的，还是需要用到babel才行。

下边介绍VS Code 如何配置 webpack+babel 调式es6代码的环境

第三方模块环境准备工作

npm i babel-core babel-loader webpack --save-dev

webpack配置文件

webpack.config.js

const path = require("path");
module.exports = {
    devtool: "source-map",
    entry: {
        index: path.resolve("./test/index.js"), // 文件主入口
    },
    output: {
        path: path.resolve("./dist/"),  // 打包文件位置
        filename: "[name].js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: "babel-loader"
        }]
    }
};

package.json文件scripts配置

"scripts": {
    "build": "webpack --progress",
}

VS Code 启动配置

按下 F5 会自动创建launch.json默认配置，我们做调整修改就行

{
    "version": "0.2.0",

    // 多个独立的配置项
    "configurations": [  
        {
            // 语言
            "type": "node",    

            // 是调试模式，还是附着到已运行的程序上
            "request": "launch",    

            // 该配置项的名字
            "name": "Launch Program",  

            // 程序的绝对路径
            "program": "${workspaceFolder}/test/index.js",  

            // 调试之前要做的任务名
            "preLaunchTask": "build",   

            // SourceMap
            "sourceMaps": true,  

            // 是否自动停止程序
            "stopOnEntry": false,  

            // 生成的代码中，如果无法映射回源代码，则自动单步执行。
            "smartStep": true,  

            // 编译后的文件地址
            "outFiles": [
                "${workspaceRoot}/dist/**"
            ]
        }
    ]
}

然后创建任务 task.json，步骤：任务菜单——配置任务

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",  // 这里是任务名称，对应launch.json中的preLaunchTask属性配置
            "type": "npm",
            "script": "build",
            "problemMatcher": []
        }
    ]
}

调式测试

完成上边的步骤后，就结束了，在你配置的对应webpack entry文件入口，写ES6代码后，打断点，按下F5即可看到断点调式效果。

比如我的test/index.js文件代码如下，引入的是lodash的add.js源码

import add from "../add.js";

console.log(add(1,2));

在add.js里边依赖的模块baseGetTag断点调式截图：

总结

不管什么框架还是库的源码，我们阅读源码的时候，为了更容易理解代码逻辑，肯定是需要源码调式的分析。使用nodejs环境调式使得效率更高，直接再IDE中阅读源码，直接调式看效果。

超融合服务器云服务器 vs 调式 asp VS Code如何 VS Code 可以在浏览器运行了？微软调式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90486.html

深入理解 Webpack 打包分块（上）

摘要：而一个哈希字符串就是根据文件内容产生的签名，每当文件内容发生更改时，哈希串也就发生了更改，文件名也就随之更改。很显然这不是我们需要的，如果文件内容发生了更改，的打包文件的哈希应该发生变化，但是不应该。前言随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的时间和带宽...

Rocko 2019-05-21 16:11 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
深入理解 Webpack 打包分块（下）

摘要：例如允许我们在打包时将脚本分块利用浏览器缓存我们能够有的放矢的加载资源。文章的内容大体分为两个方面，一方面在思路制定模块分离的策略，另一方面从技术上对方案进行落地。我之前提到测试之下是什么样具体的场景并不重要。前言随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的...

pingan8787 2019-05-22 19:26 评论0 收藏0
如何提升VS Code扩展的启动速度——不只是Webpack

摘要：同时它又需要监听事件，当物联网设备插入计算机后做出响应。比如以热启动打开物联网项目工作区的启动时间在表中是毫秒，但是正在运行的扩展页面中大约是毫秒。当在中应用懒加载时，无论是否使用打包模块，没有工作区时启动速度都远快于打开物联网工作区。概述扩展可以让用户在VS Code中向开发工作流程添加新的语言、调试器和工具。VS Code提供了丰富的可扩展模块，允许扩展访问用户界面、提供扩展功...

xiaolinbang 2019-08-26 13:47 评论0 收藏0
架构师之路

摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...

NikoManiac 2019-08-22 11:22 评论0 收藏0