- 博客(15)
- 收藏
- 关注
RSS订阅原创 webpack4.0 基础配置3(css)
1. 安装常见css预处理器的loader npm install css-loader style-loader less less-loader autoprefixer postcss-loader --save-dev 注意： 1）autoprefixer postcss-loader 为兼容配置 2) 配置sacc的话：sass node-sass sass-loader // 配置webpack加载器(loader) module: { // 设置规则和处理方案 默
2021-04-12 22:56:57
214
原创 Webpack4.0 基础配置2
问题： 每一次代码更改，重新编译后，都需要手动的去更改HTML也页面导入的JS信息，插件：html-webpack-plugin 帮我们处理的就是对于HTML的编译和导入文件的自动处理。 每一次打包的时候都把之前打包的内容清空掉，也就是build下只保留最新打包的文件。 是否存在一个插件，可以帮我们创建一个web服务（不再使用 live-server了），服务可以做以下的事： -> 自动监听代码的改变，如果代码改变自动编译。 -> 自动帮我们打开浏览器渲染页面。 -> 重新编译后自动刷.
2021-04-11 23:01:53
118
原创 Symbol常用总结
Symbol symbol是一种基本数据类型，常常用Symbol([description])返回一个Symbol类型的值。 操作symbol类型值 // 只能通过 变量 来获取值。（还有一种，后面说道） let n = Symbol('a'); let obj = { name: 'uzi', age: 12, [n]: 1100 } console.log( obj[n] ) Symbol类似于内建对象类，具有constructor（Symbol.prototype），但不能new。 var
2020-09-02 13:37:03
962
原创 Webpack 基础原理
0. 准备知识 Symbol.toStringTag Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString()方法会去读取这个标签并把它包含在自己的返回值里。 说白了，就是希望自己创建的对象能有自己的标签类型[Object Xxxx]。 例如，有许多JS对象类型没有toStringTag属性，但还是能通过toString识别特定返回
2020-08-17 00:36:09
289
原创 Webpack4.0 基础描述
1. 认识 webpack 是一种自动打包工具。 其作用：1）代码的转换：ts —> js ; scss —> css 。 2）文件优化：打包和压缩（js,css,图片等文件），提取第三方模块等。 3）模块的合并：可以将多个模块合并为一个文件。 webpack应用的核心： 1）模块转换器：将模块的内容按照需求转换为新的内容，可以加载非js文件。 2）扩展插件：webpack构建流程的过程中可以加入新的逻辑来实现你想要的需求。 2. 安装 cnpm install webpack webpack-
2020-08-11 23:39:26
191
原创 webpack4.0 (JS)
描述 webpack对js的配置是去兼容低版本浏览器而生的，可以理解为 将高级语法转为低级语法，包含es6及一些装饰器等。 核心方法是 使用 babel-loader 插件 。 注意：babel-loader 只不过是 babel 与 webpack 的桥梁，还有两个核心插件 @babel/core 和@babel/preset-env。@babel/preset-env是一个插件集合，里面包含了许多解析es6语法的插件。babel-loader 会默认调用 @babel/core 转化代码，转化的时候会
2020-08-08 13:53:20
137
原创 React.createContext 源码思考
https://github.com/facebook/react/blob/master/packages/react/src/ReactContext.js export function createContext<T>( defaultValue: T, calculateChangedBits: ?(a: T, b: T) => number, // 一个方法，用来计算新老context变化（通过 Object.is() 计算新老context的差异）。 ): Rea.
2020-07-31 22:38:19
390
原创 ReactDOM.render() 源码思考
https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMLegacy.js render --return–> legacyRenderSubtreeIntoContainer export function render( element: React$Element<any>, // 要渲染的元素( string / classComponent / Function.
2020-07-29 19:40:56
206
1
原创 React.createElement 源码思考
https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js // ** ReactElement 是 createElement的核心方法。作用是很简单，就是返回一个信息的承载容器，表明渲染节点的信息。 const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { /.
2020-07-29 17:19:50
176
原创 React.Component 源码思考
React.Component https://github.com/facebook/react/blob/master/packages/react/src/ReactBaseClasses.js // 初始时自带 四个属性 function Component(props, context, updater) { this.props = props; this.context = context; // If a component has string refs, we will
2020-07-29 12:30:07
190
原创 (Day2) React + TypeScript
Context 的使用方法 提供了一个传递数据的方法，避免一层层的传递props带来的麻烦。 Context = React.createContext（defaultValue); Context.Provider 包裹父组件，用value属性标明你要传递的值。 Context.Consumer 包裹需要接受props的子类元素，以匿名函数的形式接受value。 // Context使用方法 import React from 'react'; import ReactDOM from 'react-d
2020-07-24 00:10:28
123
原创 (Day1) React + TypeScript 复习总结
JSX JSX的本质是JS对象：JSX标签对象 ------> 映射到html标签对象中，React就是用这种方式将JSX渲染到html文档中。 简单描述一下JSX： jsx就是js于xml的一种结合体，理解为js于xml可以一起使用。它在运行的时候会被babel转译 生成 执行React.createElement(‘h1’,null,‘hello’)返回生成的对象结构（React元素），根据这个结构，最后进行页面的渲染（React.render()）。 jsx的属性 / 表达式：在大括号中，放一
2020-07-21 18:00:11
426
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人