babel

html是最优秀的标记语言，使用js对象来创建虚拟DOM对象太麻烦了，最好就能使用html语法来写虚拟DOM 这种混合写在js中的html标签，叫做JSX，但是webpack无法打包除了js之外的语言，所以在编译时，会将这种html标签转换为js对象，这就需要使用babel来将html标签转换为js对象 1.安装babel插件 安装两套包 第一套包（工具包） npm install babel - core babel - loader babel - plugin - transform - runtime - D 第二套包（语法包） npm install babel - preset - env babel - preset - stage - 0 babel - preset - react - D 2.配置webpack.config.js babel - loader@ 7.1 .5 module . exports = { module : { rules : [ { test : /\.js|jsx$/ , use : 'babel-loader' , exclude : /node_modules/ } ] } } 3.配置.babelrc 位置：项目根目录 { "presets" : [ "env" , "stage-0" , "react" ] ,

1、到官网（http://nodejs.cn/download/）下载Node.JS运行环境并安装（由于现在的Node中自带npm包管理器，所以就不需要额外下载npm了） 2、如果是新手，那么建议以引入文件的方式使用vue.js。可以在桌面上新建一个文件夹test，打卡文件夹之后，按住shift再鼠标右击，打开powershell，输入npm install vue即可 2、安装好了之后再安装vue-cli（脚手架工具），输入命令：npm install -g vue-cli 3、安装好了之后再输入vue list，来查看当前可使用的模板 4、使用vue init webpack sell来安装项目模板（sell表示你所创建的模板的名字，同项目名即可） 5、安装好后会有两个提示cd sell和npm run dev cd sell 表示进入刚刚创建的目录。 npm run dev 表示启动项目： 可以将http://localhost:8080这个url输入到浏览器中进行查看。 下面这就是刚刚创建好的项目： 在一级目录中： 　　build文件夹：webpack的文件相关。 　　node_modules文件夹：通过npm install 安装的依赖代码库。 　　src文件夹：项目存放的代码。 　　static文件夹：存放第三方静态资源。（一般会有一个.gitkeep文件

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。下面是一个例子。 //转码前 input.map( item => item+1 ); //转码后 input.map(function(item){ return item+1; }) 上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。 一、配置文件.babelrc Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 该文件用来设置转码规则和插件，基本格式如下。 { "presets":[], "plugins":[] } presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。 # ES2015 转码规则 $ npm install --save-dev babel-preset-es2015 # react 转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm

create-react-app+webpack配置 1.进入桌面运行命令：cd Desktop 2…创建项目，安装从reate-react-APP：npx create-react-app easymerchant 3.webpack隐藏的配置项进行展示：npm run eject 4.自动化测试的内容暂时用不到：删除config下的jest文件，还有script文件下的test.js package.json下的“script”下的test:node scripts/test.js"删除（是自动化测试的内容） 5.运行npm run start发现报错，删除yarn.lock,删除node_modules 如图文件目录 配置mobx状态管理 （moobx:是一个独立的库，mobx-react用于连接state状态和react视图） 安装依赖，配置mobx运行命令:yarn add mobx mobx-react -S 配置babel ** package.json文件修改 ** "babel": { "presets": [ "react-app" ], "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] ] }, "devDependencies": { "@babel/plugin

webpack之旅这么久，迎来了最终的一个章节，最近由于事情较多，所以最后一张稍稍来的比较晚，但既然是最后一节内容，那我们就来玩点有意思的: 手写一个简易的webpack打包，帮助大家更加深入的理解webpack的打包实现 首先我们先理清一下思路: webpack作为一个模块打包工具，它需要知道我们到底引入了哪些模块，我们的js代码中的高级语法的还原为低版本的es语法。那么，我们的思路是: 通过nodejs模块读取出js入口文件的内容，根据js文件的模块引入，递归的查询整个项目的文件依赖，让后将所有的相关的js文件内容读取出来，使用babel进行语法的解析，一个简易的webpack打包不就基本实现了吗？ 现在我们就开始来编写我们的webpack吧: // 引入node的文件模块 const fs = require ( "fs" ) const path = require ( "path" ) /** * 使用@babel/parser可以对我们读取出的js代码进行分析，提取出js代码中的相关的依赖： * @babel-parser下的parse()可以读取出相应依赖的一个抽象语法树（AST） */ const parser = require ( "@babel/parser" ) /** * 使用@babel/traverse模块可以对@babel

1、创建账号、项目初始化、推包 第一次发布自己的npm包 2、改造项目支持react 发布 react 组件到 npm 上 注意：编译jsx文件时注意项目要创建 .babelrc 配置,下面是babel7的编译 npx babel src --out-dir lib 下面是babel6的编译 babel app.js -d lib 如果没安装babel-cli使用下面指令 Babel6：编译 React jsx + ES6 简单入门 npm install -g babel-cli 3、源码展示 JavaScript实现拖动滑块验证 （1）目录结构 （2）源码展示 package.json { "name": "zzuwbin", "version": "3.0.3", "description": "wangbin", "main": "lib/app.js", "scripts": { "build": "webpack", "start": "webpack-dev-server --open" }, "author": "wangbin", "license": "ISC", "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel

babel 7 对于 babel 7， babel 的官网 已经介绍得非常详细了，但有时感觉文档和实际使用总是差那么一点东西。 主要包 先来看一下主要的包，babel 7 对于包进行了一些简化。 @babel/cli : 用于执行相应命令 @babel/core : 核心包，将 js 代码分析成 AST @babel/preset-env : 包含 es6+ 的语法转换规则，如箭头函数、const 等 @babel/polyfill : es6 内置对象和函数的垫片，如 Promise、Array.from 等 @babel/plugin-transform-runtime : 防止 polyfill 污染全局变量 @babel/runtime : 与 @babel/plugin-transform-runtime 配套使用 安装 babel 7 npm init -y npm i -S @babel/cli @babel/core 安装完之后，可以看见 package.json 下有 babel 的信息。 { "name": "babel_7", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &&

---恢复内容开始--- ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代，如果你想对ES6有一个快速的了解，那么请继续往下读，去了解当今最流行的编程语言JavaScript最新一代的十大特性。 以下是ES6排名前十的最佳特性列表（排名不分先后）： Default Parameters（默认参数） in ES6 Template Literals （模板文本）in ES6 Multi-line Strings （多行字符串）in ES6 Destructuring Assignment （解构赋值）in ES6 Enhanced Object Literals （增强的对象文本）in ES6 Arrow Functions （箭头函数）in ES6 Promises in ES6 Block-Scoped Constructs Let and Const（块作用域构造Let and Const） Classes（类） in ES6 Modules（模块） in ES6。 这里只列出了10条比较常用的特性。

搭建一个React工程的方式有很多，官方也有自己的脚手架，如果你和我一样，喜欢刨根究底，从零开始自己一行一行代码创建一个React脚手架项目，那你就来对地方了。本教程是针对React新手，以及对webpack还不熟悉的用户，或者是想了解当前前端工程化方案的用户。我会在整个系列通过webpack4的配置，从生产和开发环境分别入手，包含代码压缩，大文件gz压缩，webpack4的code split，postcss等插件如何引入，css编译，如何让环境支持各种css预处理器，cssModule配置化，bundle结果分析，本地代理配置，React相关技术栈等等都有一个讲解。本系列教材由浅入深，将会从零开始一步步完善整个脚手架。 前提条件 在开始之前，请确保安装了 Node.js 的最新版本。建议使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。如果你使用旧版本，你可能遇到各种问题，因为它们可能缺少 本教程用到的相关的 package 包。 执行以下命令可以查看你本机安装的node版本: node -v && npm -v 如果你本机的node版本不是最新的，建议升级到新的node版本。node版本建议通过nvm进行管理，了解可以查看 http://nvm.sh 这里不再阐述。 通过本课程，你会学到什么？ 学习完本系列教程，你将会了解（持续更新）

之前用webpack + vue 做项目一直不是很懂，这次有空梳理下，so，让我们重新开始，我们的目的是： 使用commonJs规范编写面向浏览器端的代码 升级到可以使用ES2015书写规范 使用vue来组织我们的项目代码 资料 一小时包教会 —— webpack 入门指南 vue-loader 入门Webpack，看这篇就够了 webpack 常用命令 $ webpack --display-error-details //方便出错时能查阅更详尽的信息 $ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包 $ webpack --watch //监听变动并自动打包 $ webpack -p //压缩混淆脚本，这个非常非常重要！ $ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了 $ webpack --progress //显示进度 loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置) npm install style-loader --save-dev npm install css-loader --save-dev npm install less -save-dev npm