babel

babel可以将当前运行平台(浏览器、node服务器)尚不支持的下一代或几代js语法编译为当前支持的js语法版本，比如可以把es6 es7和es8的js代码编译为es5的代码。 需要明确的几个概念： es2015 === es6 es2016 === es7 es2017 === es8 plugin: babel的插件，在6.x版本之后babel必需要配合插件来进行工作 preset: babel插件集合的预设，包含某一部分的插件plugin { "plugins": ["transform-es2015-arrow-functions"]， "presets": ["es2015"] } babel-preset-es2015: 可以将es2015即es6的js代码编译为es5 babel-preset-es2016: 可以将es2016即es7的js代码编译为es6 babel-preset-es2017: 可以将es2017即es8的js代码编译为es7 babel-preset-stage-x: 可以将处于某一阶段的js语法编译为正式版本的js代码 stage-X: 指处于某一阶段的js语言提案。 提案共分为五个阶段： stage-0: 稻草人-只是一个大胆的想法 stage-1: 提案-初步尝试 stage-2: 初稿-完成初步规范 stage-3: 候选

在一些新框架的代码中，常基于es6/7标准来书写代码。鉴于这些标准被没有被浏览器广泛支持，我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es3/5代码。 以.babelrc文件配置babel为例，presets预设编译规则(预设的编译插件集合)可以设置stage-0 至 stage-3， stage-0包含了stage-1 至 stage-3，也就是说如果设置为stage-0，stage-1 至 stage-3的编译功能默认都有了。 Stage 0：提案，经过 TC39 成员提出即可 Stage 1：初步尝试 Stage 2：完成初步规范 Stage 3：完成规范以及主流浏览器初步实现 Stage 4：完全完成，将被添加到下一年度进行发布，因此不会存在针对这个阶段的配置项 Stage < 4的提案，不保证都能成为真正的标准并定稿。 stage-3 包括以下插件： 　　transform-async-to-generator 支持async/await 　　transform-exponentiation-operator 支持幂运算符语法糖，用两个**表示 stage-2 包括 stage-3 的所有插件，额外还包括以下插件： 　　syntax-trailing-function-commas 支持尾逗号函数，额...很鸡肋 　

安装 安装：npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装：npm i -D babel-preset-es2015 babel-preset-stage-0 安装：npm i -S babel-runtime 说明： babel-core 把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过 语法转换器 分析其语法后转为低版本 js。 babel-preset-* babel-plugin-* 代表了一系列的转码插件 有了 babel-plugin 系列，可以按需配置自己想要的特性，若是想搭个 es6 环境，一个个地配置各个插件，我猜你会疯掉。babel-preset 系列就可以满足我们的需求，babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性，babel-preset-stage-0 打包处于 strawman 阶段的语法 babel-runtime babel-runtime 在代码中中直接引入 helper

学习文章： http://jspang.com/2017/09/16/webpack3-2/ webpack文档： https://doc.webpack-china.org/concepts/ 目录 安装webpack 监听和入口出口 服务和热更新 打包css文件 压缩js代码 打包html文件 图片大坑 增加babel支持（es6,es7语法转换） 常见报错集锦 安装webpack npm 初始化 npm init // 需要输入项目名称、版本号、项目描述、作者等等.. npm init -y // 选项都是默认内容，不用一个个输入，后续需要修改直接在package.json文件改就行了 *注：npm在国内下载安装模块太慢，可以换成cnpm(淘宝npm镜像) npm install -g cnpm --registry=https://registry.npm.taobao.org 本地安装 npm install --save-dev webpack npm install --save-dev webpack@<version> //说明: --save代表把这个模块保存到package.json里面， -dev代表用于开发环境 全局安装(不建议全局安装webpack,后面有坑) npm install --global webpack //安装 npm uninstall

插件打包与发布 插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，简单说明一下这个过程，以插件名 dialog 为例 1、创建 dialog 目录，并进入 2、运行命令行，初始化项目，生成 package.json npm init -y 3、使用 webpack-simple 模板构建项目基本结构（前提为已自行安装好 vue-cli） vue init webpack-simple 根据导航提示，设置好项目后，基本结构生成完成 4、删除无用内容 删除 index.html 和 src 目录下的所有文件 5、复制插件内容到 src 目录中 6、修改 package.json 配置内容 //前端全栈学习交流圈：866109386 //面向1-3经验年前端开发人员 //帮助突破技术瓶颈，提升思维能力 { "name": "dialog", "description": "the dialog plguin", "version": "1.0.0", "author": "TerryZ <terry5@foxmail.com>", "license": "MIT", //删除原有的"priveate": true，发布到公共库的项目，不能设置该参数 //增加 main 配置，设置插件在安装后的主入口文件 "main": "dist/dialog

经过这么多年的发展，JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限，在 Web 前端、移动端、服务端甚至物联网设备上都大展身手，到处都有它的身影。 在 JavaScript 语言日渐强大的同时，与其配套的开发工具也蓬勃发展。现在的 Web 前端项目，早已不是写几个 HTML 页面，加点 CSS 和 JS 就完事了。随便一个实用的项目，可能都需要用到一些框架和第三方库，以及相应的脚手架、依赖包管理、预编译、构建打包、压缩合并等等工具。纯手工完成这些任务，已经几乎不太可能了。 科学技术是第一生产力，而工具就是其中的一个体现。工欲善其事必先利其器，既然工具解放了人力，我们就应该拥抱它们。本文总结了围绕 JavaScript 的一系列工具，看看一个常见的项目到底需要用到哪些工具。 静态类型检查 JavaScript 本身是一门动态脚本语言，是弱类型的。也就是说，没有编译阶段的数据类型检查，只能在运行时确定类型。好处是比较灵活，简单易学，代码量也比较少。缺点也是明显的，就是稍不注意容易出 bug，特别是大型项目，如果没有开发规范，任由开发人员自由发挥，维护起来简直就是灾难。为了弥补这个缺陷，一些自带类型系统、可转译成 JavaScript 的语言出现了。 Flow ：Facebook 出品，用 OCaml 写的 JavaScript

ES6也出来有一会时间了，他新增的语法糖也的确大大提高了开发者的效率，今天就总结一些自己用到最多的。 说到ES6肯定是先介绍 Babel 了，据阮一峰老师介绍到，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。 一、 Babel 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 install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle。 初始化项目 npm init -y npm install webpack webpack-cli -D 打包成低版本插件 npm install babel-loader -D 配置babel 安装依赖插件 npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D npm install @babel/runtime @babel/runtime-corejs3 新建 webpack.config.js，如下: //webpack.config.js module.exports = { module: { rules: [ { test: /\.jsx?$/, use: ['babel-loader'], exclude: /node_modules/ //排除 node_modules 目录 提升编辑效率 } ] } } 这里，我们可以在 .babelrc 中编写 babel 的配置，也可以在 webpack.config.js 中进行配置 创建一个 .babelrc

1.在项目目录cmd下运行 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.下载成功后再运行 cnpm install node-sass 两个都下载成功后就可以正常的运行项目了。 如果你遇到了使用 npm 安 装node_modules 总是提示报错：报错: npm resource busy or locked..... 。 可以先删除以前安装的 node_modules : npm cache clean npm install 空格 报错 屏蔽代码 找到 webpack.base.config.js文件注释掉下面的东西！！ var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: { app: './src/main.js' }, output: { path: config.build

webpack 项目中 npm i webpack --save npm i webpack-cli --save yarn add html-webpack-plugin yarn add clean-webpack-plugin yarn add style-loader css-loader yarn add file-loader url-loader webpack-.config.js 多入口单出口 const path = require ( 'path' ) ; module . exports = { mode : 'development' , // 打包模式 //entry:"./scr/main.js", // 指定入口 entry : [ './src/one.js' , './src/two.js' ] , // 数组模式可以将多个文件都打包成为一个。多入口单出口 output : { path : path . resolve ( __dirname , 'dist' ) , filename : 'bundle.js' , // 指定文件的出口模式 } , } ; 多入口多出口 const path = require ( "path" ) module . exports = { mode : "development" , // 打包模式 //