babel

1.webpack与Grunt、Gulp这类打包工具有什么不同 像Grunt、Gulp这类构建工具，打包的思路是： 遍历源文件 → 匹配规则 → 打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。 webpack跟其他构建工具本质上的不同之处在于： webpack 是从入口文件开始，经过模块依赖加载、分析和打包三个流程完成项目的构建。在加加载、分析和打包的三个过程中，可以针对性的做一些解决方案，比如code split（拆分公共代码等）。 当然，webpack还可以轻松的解决传统构建工具解决的问题： 模块化打包，一切皆模块，js是模块，css等也是模块 语法糖转换：比如ES6转ES5、TypeScript 预处理器编译：比如less、sass等 项目优化：比如压缩、CDN 解决方案封装：通过强大的Loader和插件机制，可以完成解决方案的封装，比如PWA； 流程对接：比如测试流程、语法检测等。 2.wepback有几种写法 webpack的配置类型是多样的，最常见的是直接作为一个对象来使用，除了使用对象，webpack还支持函数 promise和多配置数组。 3.我们要开发一个jQuery插件、vue组件等，需要怎么配置webpack 如果我们打包的目的是生成一个共别人使用的库，那么可以使用output

package.json "devDependencies": { "@babel/core": "^7.2.2", "@babel/plugin-proposal-class-properties": "^7.2.3", "@babel/plugin-transform-runtime": "^7.2.0", "@babel/preset-env": "^7.2.3", "babel-loader": "8.0.5", "bootstrap": "^4.4.1", "css-loader": "^3.2.1", "file-loader": "^5.0.2", "html-webpack-plugin": "^3.2.0", "less": "^3.10.3", "less-loader": "^5.0.0", "node-sass": "^4.13.0", "open-iconic": "^1.1.1", "sass-loader": "^8.0.0", "scss-loader": "^0.0.1", "style-loader": "^1.0.1", "url-loader": "^3.0.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0" },

一、babel介绍 Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。在这个源码到源码的转换过程当中，抽象语法树，即AST，起到了重要的作用。 二、抽象语法树（AST） 抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，一种编程语言的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。和我们的常说的虚拟DOM有点像，虚拟dom是用json的格式把DOM结构抽象成js对象，用于描述DOM的结构，每个节点的类型、属性等等，类似的AST是把js的源代码抽象为js对象的格式，以方便描述这段代码的语法。程序代码本身被映射成为一棵语法树，通过操纵语法树，我们能够精准的获得程序代码中的每一个精确的节点。例如声明语句，赋值语句等。 三、babel的处理步骤 Babel 的三个主要处理步骤分别是： 解析（parse） ， 转换（transform） ， 生成（generate） 。 解析 步骤接收代码并输出 AST 转换 步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。 这是 Babel

webpack 的核心价值就是前端源码的打包，即将前端源码中每一个文件（无论任何类型）都当做一个 pack ，然后分析依赖，将其最终打包出线上运行的代码。webpack 的四个核心部分 entry 规定入口文件，一个或者多个 output 规定输出文件的位置 loader 各个类型的转换工具 plugin 打包过程中各种自定义功能的插件 webpack 如今已经进入 v4.x 版本，v5.x 估计也会很快发布。不过看 v5 的变化相比于 v4 ，常用的配置没有变，这是一个好消息，说明基本稳定。 前端工程师需要了解的 webpack 前端工程化是近几年前端发展迅速的主要推手之一，webpack 无疑是前端工程化的核心工具。目前前端工程化工具还没有到一键生成，或者重度继承到某个 IDE 中（虽然有些 cli 工具可以直接创建），还是需要开发人员手动做一些配置。 因此，作为前端开发人员，熟练应用 webpack 的常用配置、常用优化方案是必备的技能 ―― 这也正是本文的内容。另外，webpack 的实现原理算是一个加分项，不要求所有开发人员掌握，本文也没有涉及。 基础配置 初始化环境 npm init -y 初始化 npm 环境，然后安装 webpack npm i webpack webpack-cli -D 新建 src 目录并在其中新建 index.js ，随便写点 console

React框架已经火了好长一段时间了，再不学就out了！ 对React还没有了解的同学可以看看我之前的一篇文章，可以快速简单的认识一下React。 React入门最好的实例－TodoList 自己从开始接触react一窍不通，到慢慢的似懂非懂，通过各种途径学习也有一阵了。学习过程中还会接触到很多新的东西，比如ES6、 webpack，过程艰辛谁人懂，见坑填坑慢慢来。今天把学习过程过滤了一下，只说项目实际需要用的东西，总结了一套能看到的东西，分享给大家，希望能让 读者少踩一些坑！ 本文看点 实际项目效果 ：最终你只需要在本地启一个服务，就能看到运行效果。 webpack的配置 ：项目实战中常用的插件和配置方法。 React用法 ：React在MVC（模型Model－视图View－控制器Controller）层面上主要扮演了视图的作用。我们可以学习它在项目中到底该如何使用。 React-router配置 ：单页面应用（SPA）离不开路由，我们可以学习在项目中React-router如何配置。 ES6语法 ：我们会用到一些在项目中常见的ES6语法。 antd的使用 ：蚂蚁金服出的一款基于React的框架，我们可以学习如何去使用。 项目效果 项目代码已经上传至github， 项目代码github地址 。大家把代码下载下来之后，跟随以下步骤即可在本地看到效果。 首先安装node环境。

技术栈 react+webpack 支持前台编写。node+mysql做后台维护 使用ts，包括了tsc,bable7,antd 使用mysql,koa-route 做路由 react+webpack配置 由于使用bable7 ,所以直接使用.babelrc 解析react、ts、es6高级语法 .babelrc相关配置如下，此文件位于项目根目录下。 //.babelrc { "presets": [ [ "@babel/preset-env", { "modules": false } ], ["@babel/preset-react"], ["@babel/preset-typescript"] ], "plugins": [ [ "import", { "libraryName": "antd" } ], [ "@babel/plugin-proposal-class-properties", { "loose": true } ], [ "@babel/plugin-proposal-decorators", { "legacy": true } ], "@babel/plugin-syntax-dynamic-import" ] } 同样需要配置tsconfig.json,此文件位于项目根目录下。内容如下 { "compilerOptions": { "outDir":