diff算法(二)之项目的构建

tech2023-01-25 112

博客概述

原本以为可以直接写diff算法了，但是写算法的过程中我发现有些东西是不得不用的，比如构建工具。所以说diff的实现得拖到系列三了

一、使用构建工具的原因

这个其实是我刚写diff算法遇到的。废话不多说，直接上代码:

/*** * 1、我上一篇项目的整体目录如下: * |-index.js * |-index.html * 2、省略的代码可以去上一篇找 */ import {Diff} from './diff class Element{ constructor(...){ ...省略一些代码 } } function createElement(...){ ... 省略一些代码 } function render(...){ ...省略一些代码 } var vnode1=createElement(...) var vnode2=createElement(...) var diff=Diff(vnode1,vnode2) console.log(vnode1) render(vnode1) console.log('diff',diff) /*** * @author xiaojiujiu 2020-09-03 * @method Diff * @params {Object} oldTree * @params {Object} newTree * @description * 1、oldTree --老树 * 2、newTree --新树 * 3、当时想先测试一下，就随便写了点 */ export function Diff(oldTree,newTree){ var difference if(oldTree.tags==newTree.tags){ }else{ difference={action:'replace',value:newTree} } return difference } <! DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>diff算法极简实现</title> </head> <body> <div id='root'></div> <script src='./index.js'></script> </body> </html>

测试结果：

Cannot use import statement outside a module。

原因:

浏览器根本就不认识es6语法。。。

解决办法

构建工具粉墨登场。构建工具有很多种，比如webpack、parcel、Gulp、Grunt等等。这里我们选用webpack，据说parcel零配置，我只用过一次（确实挺爽的）。

二、下载安装webpack

/** * 1、下面4条命令缺一不可 * 2、-g 全局安装 * --save-dev 局部安装（开发依赖） * 3、此时应该更改目录如下: * |-index.html * |-package.json * |-src * |-diff.js * |-index.js * |-webpack.config.js **/ npm install webpack -g npm install webpack --save-dev npm install webpack-cli -g npm install webpack-cli --save-dev

三、配置webpack

webpack.config.js文件内容如下:

/** * 1、entry --工作的入口文件 * 2、output --输出 * 2.1、path - 输出文件的位置 * 2.2、filename - 输出文件的文件名 * 3、mode -- 运行模式 * 4、development、production的区别 * 4.1、development在默认情况下，webpack只认识cjs和普通的es6语法，高级的es6语法webpack在默认情况下不会编译。 * 4.2、production= development + 压缩（体积小） * 5、配置完webpack，直接终端（项目根目录）输入webpack，就可以使webpack干活。 * 此时会在项目根目录下生成一个dist目录，dist目录下有一个bundle.js。 **/ var path=require('path') module.exports={ entry:'./src/index.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' } mode:'production' }  <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>diff算法的极简实现</title> </head> <body> <div id='root'></div> <script src='./dist/bundle.js'></script> </body> </html>

测试结果:

此时打开chrome浏览器控制台，你会发现vnode的类型是r，对比出来的差异也是r。

原因:

此时的webpack默认只认识es6的低级语法，不认识高级语法如promise，也不认识es7的class。

四、再配webpack

npm install -D babel-loader @babel/core @babel/preset-env npm install core-js -D

webpack.config.js配置如下:

/** * 为什么配置文件里可以写cjs？ * 答: 因为webpack是基于nodejs的一个打包工具，而且当我们在终端运行webpack的时候，会在指定位置下生成一个文件夹，在前端世界中，只有nodejs有这个能力。 **/ const path=require('path') module.exports={ entry:'./src/index.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, mode:'development', module:{ rules:[ { test:/\.js$/, exclude:/node_modules/, loader:'babel-loader', options:{ presets:[ [ '@babel/preset-env', { useBuiltIns:'usage', corejs:{ version:3 }, targets:{ ie:'9', chrome:'60', firefox:'60', safari:'50', edge:'17' } } ] ] } } ] } }

五、测试运行

r成功的被转化为Element

六、总结

这篇文章有点像webpack入门教程。。。

最新回复(0)