在 es6 import 在 babel 转换后会变成 node 的 require。这点大家都知道。同时, 大家对 required 的机制只有大致了解。 例如, , 会获取 node_modules 下的 jquery。但是获取的具体规则却不是很了解。 require 规则 resolve 规则 如何解析路径的规则 X 是核心模块(core modules) 如果 X 是核心模块, 例如 fs, path, 那么直接返回核心模块 X 是第三方模块(thrid party…
背景 npm scripts存在很多脚本, 例如 , 等等。但是 npm 还支持很多在 package.json 中定义的 hooks 脚本 这里介绍一下常用的脚本 prepublishOnly 适用于执行 npm publish 之前, 你需要运行脚本, 例如构建代码 prepare 适用于执行 npm publish 或者 npm install, 我当前没有想到什么好的应用场景。 postpublish 用于 npm publish…
package.json 中存在一些特殊字段, main,jsnext:main,module 的区别。经常使用 npm 发布包时会用到他们。 但很多人无法理解具体区别，故在此阐明。 main: main 字段指明包的入口文件位置,默认 index.js。这里的文件应该放置 commonJs(cjs)模块, 如果源码需要被编译才能使用,那么此处的文件就必须已经被编译了 jsnext:main: 有一些工具,例如 webpack…
最后, 查看 这里定义了整个CRA需要用到的路径 这里面情况很特殊, CRA 存在一种eject的情况, 会把所有配置暴露出来, 让用户自己修改。故我会忽略eject的情况, 代码会变成如下： 不考虑 eject 后的path代码
webpack配置解析 承接上篇create-react-app 源代码简析(1) 是整个 CRA 的核心。这一版本 CRA 将开发和生产的 webpack.config 合 2 为 1, 虽然精简了代码量, 但使得阅读难度大大提升 变量设置, 组件引用 CRA 中 webpack.config.js 配置说明说的很完善, 我只会添加一些个人见解和简单翻译 这篇webpack配置可以算是webpack的经典配置, 包含大量的插件使用, 非常适合收藏
前言 简称为 , 之后均用 表示 是个多包仓库, 我 fork 了一份(地址), 以便追溯。 核心包: 简析版本为, 发布日期为 2018-11-01 由于我不熟悉, 故相关部分会会不准确,请见谅！ 是功能强大的自动化前端构建工具, 但是配置复杂多变。将配置隐藏起来,适合新入门的开发者。 另外一种使用场景为需要同时在多个项目中开发, 又想保证不同项目配置统一, 是一种不错的选择。为了能在工作中用好, 所以需要深入了解去实现源码,故作此笔记。 项目目录介绍 整个 CRA…
背景 最近由于公司需求, 需要向 npm 推送不少包, 但是包的版本管理很麻烦。于是就寻找有没有什么高级一点的办法，首选是自己写脚本, 然后发现了 semantic-release semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes and…