注意：相对路径必须加 ./ 可以省略后缀名（.js） 相对路径中的./不能省略,否则报错，省略代表的是核心模块
为了学习 rollup 打包原理，我克隆了最新版（v2.26.5）的源码。然后发现打包器和我想像的不太一样，代码实在太多了，光看 d.ts 文件就看得头疼。为了看看源码到底有多少行，我写了个脚本，结果发现有 19650行，崩溃...
chrome v28.0.1500.71 + nodejs v0.10.18 / firefox v14.0.1 + nodejs v0.10.18
https://github.com/zhangyue0503/html5js/blob/master/singlepagewebapplications/spa1.html
我主要是想说摇树失败的原因（tree shaking 失败的原因），先讲下摇树本身效果
1.线上环境静态文件存放于前端CDN静态池,有一个专门的发布系统可以上传文件.在发布文件的时候需要创建url路径,因为CDN的缓存原因,在路径中增加了版本号,最终结果的url类似这种//n.sinaimg.cn/mail/sinamail66/js/139276/xxx.js
平时经常会逛 Github，除了一些 star 极高的大项目外，还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣，或是有不错的技术点，读起来都让人有所收获。所以准备汇总成一个「漫游Github」系列，不定期分享与解读在 Github 上偶遇的有趣项目。本系列重在原理性讲解，而不会深扣源码细节。
global 对象，在node.js中表示全局对象。类似javascript中的window，挂在global上。可以直接调用
1 背景 相信对于每个刚接触构建的同学来说， webpack 都是难以跨越的一道坎，它凭着抽象的概念、“言简意赅” 的文档，难倒了一众英雄好汉。 由于自己平时从零手写 webpack 配置的机会比较少，所以对 webpack 里的一些配置不都是特别清楚。 最近的一个需求需要给页面资源增加 md5 版本号，我正好借着这个机会，把项目里的 webpack 配置都重新梳理了一遍。 本文对于基本的配置概念（如 entry 、 output 等）就不一一赘述了，着重介绍的是 splitChunks 和 manifes
TypeScript 模块 TypeScript 模块的设计理念是可以更换的组织代码。
Next-generation ES module bundler官网定义此为下一代ES模块捆绑器。
IIFE包含两部分。 第一部分是一个匿名函数，它包裹在分组操作符()中，拥有独立的词法作用域。 第二部分是再一次使用分组操作符()，创建一个立即执行函数表达式。Javascript引擎到此将立即执行函数。 大体结构如下所示：
之前在做webpack配置时候多次用到路径相关内容。最近在写项目的时候，有一个文件需要上传到阿里云oss的功能，同时本地服务器也需要保留一个文件备份。多次用到了文件路径相关内容以及Node核心API的path模块，所以系统的学习了一下，整理了这篇文章。
在此之前，首先要知道经常配置的 output 中有关 filename 和 chunkFilename 的区别；简单来说在 entry 定义的入口文件走的就是 filename 配置项，在入口文件内部引入的通常情况下是 chunk，走 chunkFilename 的配置
node 模块化 JS 诞生的时候，仅仅是为了实现网页表单的本地校验和简单的 dom 操作处理。所以并没有模块化的规范设计。 项目小的时候，我们可以通过命名空间、局部作用域、自执行函数等手段实现变量不冲突。但是到了大一点的项目，各种组件，各种第三方插件和各种 js 脚步融合的时候，就会发现这些技巧远远不够。 模块化的演变 为什么要有 JS 模块化呢？在浏览器中，顶层作用域的变量是全局的，所以项目稍微复杂点，如果引用的 js 非常多的时候，很容易造成命名冲突，然后造成很大意想不到的结果。 为了避免全局污染，J
exports和module.exports的适用误区
实例：我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件：base64.js、config.js、data.js
Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务，大家只需在 Webpack 的配置中，增加 devServer (https://www.webpackjs.com/configuration/dev-server/) 的配置来启动。devServer 配置的本质是 webpack-dev-server 这个包提供的功能，而 webpack-dev-middleware 则是这个包的底层依赖。
对于 JavaScript 来说，模块化是一个相对现代的概念，这篇文章会带你在 JavaScript 的世界里快速浏览模块化的历史进程~
网上找的科普贴，整理了一下发给大家，出处见底部链接。有许多类比的例子不太准确，大家参考下就行。
从一个快要下班的BUG开始，由于原部门同事想要基于一个项目再拆分出几个项目，我们本来用的是qiankun(基座模式)的微前端模式，再拆分其实是比较简单的
本文主要是在我读《高性能Javascript》之后，想要记录下一些有用的优化方案，并且就我本身的一些经验，来大家一起分享下，
这个文件夹就是存放 我们下来的依赖包的,如果你运行了命令没有发现这个文件,请关闭HBuilder 工具后重新打开
我在经过读10篇webpack相关超火的文章，并深入webpack源码，最后决定写一个webpack系列文章。
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
打开命令行, 输入指令=> $ sudo npm install --global
配置文档：https://cn.vitejs.dev/config/，基于ESM；
框架设计远没有大家想的那么简单，并不是说只把功能开发完成，能用就算完事儿了，这里面还是有很多学问的。比如说，我们的框架应该给用户提供哪些构建产物？产物的模块格式如何？当用户没有以预期的方式使用框架时是否应该打印合适的警告信息从而提升更好的开发体验，让用户快速定位问题？开发版本的构建和生产版本的构建有何区别？热跟新（HMR：Hot Module Replacement）需要框架层面的支持才行，我们是否也应该考虑？再有就是当你的框架提供了多个功能，如果用户只需要其中几个功能，那么用户是否可以选择关闭其他功能从而减少资源的打包体积？所有以上这些问题我们都会在本节内容进行讨论。
在 github 上直接观看 markdown 会把图片转存到缓存中，github 转存后的图片清晰度很有问题，因此如果图片看不清，可以移步知乎上的相同文章
WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的
可以看出小程序根目录下，有三个app开头的文件(app.js/app.json/app.wxss)，和两个文件目录pages、utils.
我们知道，Node.js是基于CommonJS规范进行模块化管理的，模块化是面对复杂的业务场景不可或缺的工具，或许你经常使用它，但却从没有系统的了解过，所以今天我们来聊一聊Node.js模块化你所需要知道的一些事儿，一探Node.js模块化的面貌。
path 模块是Node.js内置的一个核心模块，专门用于处理和解析文件/目录路径，提供了跨平台的路径相关操作功能💻 MacOS、Linux、Windows等系统下路径的差异性问题，path模块已经帮我们做了很好的封装和适配。
那么此时我想在vue实例组件中使用子组件中的PLanguage的data,显然是不能直接获取到的
上篇向大家介绍完了基础功能篇，这次分享的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是我最常用到的Chrome功能面板，也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试，而它也几乎能解决我80%的代码问题。Js断点这个功能让人兴奋不已，在没有js断点功能，只能在IE（万恶的IE）中靠alert弹出窗口调试js代码的时代（特别alert一个object根本不会理你），那样的开发环境对于前端程序员来说简直是一场噩梦。本篇文章讲会介绍Sources的具体用法，帮助各位在开发过程中够愉快地调试js代码，而不是因它而发疯。首先打开F12开发工具切换到Sources面板中:
可是，你真的了解 依赖注入(Dependency Injection, DI) 吗？
所谓打包多页面，就是同时打包出多个 html 页面，打包多页面也是使用 html-webpack-plugin，只不过，在引入插件的时候是创建多个插件对象，因为一个html-webpack-plugin 插件对象只能打包出一个 html 页面。如:
只需要在app.json->pages中新增页面的存放路径，小程序开发工具即可自己创建对应的页面文件。如下图所示
Scope Hoisting 是 webpack3 的新功能，直译为 "「作用域提升」"，它可以让 webpack 打包出来的「代码文件更小」，「运行更快」。
说起国际化，开发过跨区域网页的小伙伴应该都遇到过。我们的网页需要配置多套语言，方便用户进行切换。
看目录结构清晰明了，由于“ CSS 文件分离 != CSS 作用域隔离”这样的机制，如果我们不通过一些工具或规范来解决 CSS 的作用域污染问题，会产生非预期的页面样式渲染结果。
现在学习的是 webpack4 的最新版，新建文件夹，npm init -y 初始化一下，然后执行下面命令进行安装，需要同时安装 webpack 和 webpack-cli。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
