前端
偑色梧桐
More haste,less speed.
展开
-
认识javascript原型链
函数的原型对象JavaScript的函数内部有两个不同的内部方法[[call]]和[[Construct]]在介绍二者之前先说一下函数的原型对象,函数本身有一个原型对象,这个对象用于判定函数的类别。以Object为例:console.log('Object.prototype :>> ', Object.prototype); // Object.prototype :>> {}打印的结果是一个空对象,但如果换一个普通的方法,会发现打印结果有些许的不一样functi原创 2020-07-25 21:58:53 · 819 阅读 · 0 评论 -
webpack核心概念
entry打包流程的开始需要一个入口,用于指定webpack的打包起点,webpack会从入口开始处理工程依赖,构建模块(module)之间的依赖关系树,这些依赖关系模块在打包时被webpack封装为chunk,随后webpack会将chunk打包为bundlecontext资源入口的路径前缀,在配置时要求必须使用绝对路径。module.exports = { context: path.join(__dirname, './src'), entry: './index.js'}conte原创 2020-06-22 10:30:35 · 128 阅读 · 0 评论 -
使用webpack构建项目-基础配置
初始化项目npm init执行后根据命令行提示修改各项内容。添加webpack依赖这里使用yarn来进行包管理yarn add webpack webpack-cli --dev其中 webpack和webpack-cli为webpack的基础依赖,--dev表示我们需要将这两个包添加到 package.json的 devDependencise节点下。可以使用以下指令验证webpack是否安装成功。npx webpack --version...原创 2020-06-16 08:23:04 · 215 阅读 · 0 评论 -
react获取children的ref
作为容器组件,接收来自props中的children并进行布局分配是常规需求,但如何获取children的ref呢。其实可以使用React.cloneElement()来实现该需求, 这里以单节点为例:const child = React.Children.only(this.props.children);const newChild = React.cloneElement(child, { className: classNames( 'new-child', child.prop原创 2020-05-15 10:20:27 · 3277 阅读 · 0 评论 -
Rollup从入门到入坑(4)完善打包环境配置
好的环境配置不仅可以提高效率减少错误的产生,更能够约束所有的参与人员。使用prettier进行代码格式化.prettierrc.json{ "printWidth": 80, "semi": true, "singleQuote": true, "trailingComma": "all", "arrowParens": "always", "tabWidth": 2...原创 2020-03-22 18:47:49 · 1262 阅读 · 0 评论 -
Rollup从入门到入坑(3)发布到npm
严格来说,将包发布到npm并不是Rollup的事情,但发布到npm却是最容易实现代码复用的方法。修改功能将代码修改为计算目标时间距离当前时间大致时长的功能。代码如下// src/main.jsimport ms from 'ms';import targettime from './targettime';import millisecondUtil from './millisenc...原创 2020-03-11 22:06:11 · 589 阅读 · 0 评论 -
Rollup从入门到入坑(2)引入第三方库
到目前为止,我们已经可以使用Rollup编译本地代码,但有些时候,借助社区的力量可以使我们的程序编写更高效。以ms为例引入第三方模块npm i -s ms修改src/index.js// src/index.jsimport ms from 'ms';export default function hourToSeconds(hours) { return ms(`${h...原创 2020-03-10 21:48:40 · 5466 阅读 · 2 评论 -
配置vscode的搜索选项
vscode的默认配置会搜索一些无效的选项,当内容过多时可能会引起卡顿甚至崩溃,因此需要将不重要的文件从搜索选项中忽略。在settings.json根节点下添加 search.exclude{ "search.exclude": { "**/node_modules": true, "**/bower_components": true, ...原创 2020-03-10 16:19:32 · 4341 阅读 · 0 评论 -
Rollup从入门到入坑(1)
把代码从文件编译到命令行并没有任何用处,本节将通过Rollup的基本参数将代码编译到文件系统。原创 2020-03-10 07:51:04 · 1352 阅读 · 0 评论 -
Rollup从入门到入坑(0)
概述什么是RollupRollup是一个JavaScript模块打包器,可以将小块代码编译成大块复杂的代码,例如library或应用程序。Rollup对代码模块使用ESM模块格式,ESM最终会由浏览器原生实现,但当前Rollup可以让你提前体验。关于前端模块请参照安装Rollup全局安装npm i -g rollup开发安装npm i -D rollup查看当前安装的Rol...原创 2020-03-09 21:15:08 · 211 阅读 · 0 评论 -
前端模块分类
前端模块化概述模块作为现代化编程的基础复用单元,在"搬砖"的日常工作中可以起到明显的加速作用。随着前端工程化的不断完善,模块将在前端扮演越来越重要的角色。当前的模块系统大体分为iife、cjs、amd、umd、esm、systemiife(Immediately Invoked Function Expression)即立即执行函数,是最早的模块编写方式,格式如下(function ()...原创 2020-03-09 17:24:57 · 1277 阅读 · 0 评论