Vue+webpack+Element 兼容问题总结(小结)

项目中用到了Vue.js和Elenment-UI

Vue官方文档中给出明确范围：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

而且Element-UI支持IE10+及大多数浏览器。由此要用到Babel，主要用于将ECMAScript 2015+代码转换为旧浏览器或环境中向后兼容的JavaScript版本。在此之前，需要先搞清楚IE6~11是否支持es5：

  • IE6~IE8:不支持es5的所有语法;
  • IE9:支持除ECMAScript 5 Strict Mode外的es5语法；
  • IE10:支持es5的所有语法;
  • IEÏ11:支持es5所有语法及es6中const和Typed Arrays新语法

babel可以把同种语言的高版本规则翻译成低版本规则，其转译过程也分为三个阶段：parsing、transforming、generating。(1)解析步骤接收代码并输出 AST(抽象语法树),这其中又包含两个阶段词法分析和语法分析。词法分析阶段把字符串形式的代码转换为令牌（tokens）流。语法分析阶段会把一个令牌流转换成 AST 的形式,方便后续操作。(2) 利用我们配置好的plugins/presets把Parser生成的AST转变为新的AST。(3)代码生成步骤过程是深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。

下面总结Babel的使用：

1、由于项目使用了webpack打包工具，安装

npm install --save-dev babel-loader babel-core

2、在webpack.config.js中设置

module: {
  rules: [
   {
    test: /\.js$/,
    loader: "babel-loader",
    include: [
     resolve("src"),
     resolve("test"),
    ],
   },Ï
  ]
}

可以根据webpack中Module的选项来配置相应内容

3、在根目录下创建.babelrc文件来添加插件,文件添加成功后，可以开始配置内容

首先，可以使用evn预设置，它支持ES2015+的转换

npm install babel-preset-env --save-dev

在.babelrc文件中

{
"presets":["evn"]

}

如果没有任何配置选项，babel-preset-env的行为与babel-preset-latest(或babel-preset-es2015、babel-preset-es2016和babel-preset-es2017一起)完全相同。

当然，还有可选的选项可以配置，例如：

  [
   "env",
   {
    "modules": false,
    "targets": {
     "browsers": ["> 1%", "last 2 versions"]
    }
   }
   "stage-2"
  ],

evn中设置项所代表的意思：

  • targets.node 支持到哪个版本的
  • node targets.browsers 支持到哪个版本的浏览器
  • loose 启动宽松模式，配合 webpack 的 loader 使用
  • modules 使用何种模块加载机制
  • debug 开启调试模式
  • include 包含哪些文件
  • exclude 排除哪些文件
  • useBuiltIns 是否对 babel-polyfill 进行分解，只引入所需的部分

targets.browsers是参考browserslist https://github.com/browserslist/browserslist设置浏览器条件。

设置了完成后，还需要用babel-polyfill来实现浏览器不能支持的原生代码，在浏览器引入了相应的polyfill后，可以用新的内置对象比如 Promise 或者 WeakMap, 静态方法比如 Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes。但是因为babel-polyfill是在原型链上直接添加方法，会污染全局变量，项目打包以后体积增大。

npm install --save babel-polyfill

若在应用程序的入口顶点引入，则

require("babel-polyfill")；

如果在应用程序的入口点使用ES6的导入语法，则应该在入口点的顶部导入polyfill，以确保首先加载polyfills

import("babel-polyfill");

如果通过webpack.config.js,在入口处添加：

module.exports = { entry: ["babel-polyfill", "./app/js"] };

为了不污染全局对象和内置的对象原型，可以用babel-plugin-transform-runtime，在.babelrc文件中

"plugins": [
  [
   "transform-runtime",
   {
    "helpers": false,
    "polyfill": true,
    "moduleName": "babel-runtime"
   }
  ],
 ]

插件应用于babel的转译过程，尤其是第二个阶段transforming，如果这个阶段不使用任何插件，那么babel会原样输出代码。
如果同时添加了plugins和presets,注意：插件会在预设项之前运行；插件按第一个到最后一个正序执行；预设中设置从最后一个到第一个逆序执行，设置时注意执行顺序。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue + webpack如何绕过QQ音乐接口对host的验证详解

    vue + webpack如何绕过QQ音乐接口对host的验证详解

    前言 最近在使用vue2.5+webpack3.6撸一个移动端音乐项目, 获取全部歌单json数据时遇到了接口对host和referer的限制 ,故不能直接在前端使用jsonp对接口数据的读取. 一. 先实现使用jsonp读取的方式安装jsonp模块并, 封装请求方法 1. $ npm install -S jsonp 2. 封装import originJSONP from 'jsonp' function jsonp(url, data, options) { // 如果存在?则直接加par

  • vue中element 上传功能的实现思路

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传 upload 看完文档后,感觉有两种思路可以实现 before-upload auto-upload, on-change before-upload 初始代码 // template <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-fi

  • 如何用webpack4带你实现一个vue的打包的项目

    一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置, 一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤. github 地址 clone project git clone git@github.com:naihe138/nvue.git install npm install or yarn 一.初始化项目 初始化项目,用vue-loader来打包.vue文件,html-webpack-plugin插件来导出html文件. 第一步我们很简单

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • vue+webpack模拟后台数据的示例代码

    vue+webpack模拟后台数据的示例代码

    一.在webpack-dev-conf.js文件中: 1.在const portfinder = require('portfinder')后添加如下内容 const express = require('express') const app = express() //请求server var appData = require('../mock/goods.json') //加载本地数据文件 var apiRoutes = express.Router() app.use(apiRoute

  • webpack+vue-cil中proxyTable处理跨域的方法

    跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 1.jsonp 缺点:只能get请求 ,需要修改B网站的代码 2.cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容).需要B网站在响应中加头 3.postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容).需要修改B网站的代码 4.iframe window.name 传值得方式很巧妙,兼容性也很好.但是也是需要你能修改B网站代码 5.服务

  • 详解vue+webpack+express中间件接口使用

    环境:vue 2.9.3; webpack 目的:接口的调用 跨域方式: 1.express中间的使用 2.nginx代理 3.谷歌浏览器跨域设置 --------------------------------------------分割线--------------------------------------------- express中间件---不推荐 原理:本地代码请求->express中间件(处理,添加headers后转发)->服务器 express中间件 medical 本地

  • Vue Element 分组+多选+可搜索Select选择器实现示例

    Vue Element 分组+多选+可搜索Select选择器实现示例

    最终效果(http://47.98.205.88:3000/mult_group_selection)见下图.实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选.供有相关需求的开发者参考 准备工作: 除了vue脚手架.element等必要包之外.该项目还用到了linq.js(https://github.com/mihaifm/linq),该工具可以快速从数组中查找所需内容. npm install --save linq

  • 基于Vue+element-ui 的Table二次封装的实现

    本人第一次写这个 写的不好还望指出来 作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ! 公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了 效果图 表格组件的引入与使用 <com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange&q

  • Vue+webpack+Element 兼容问题总结(小结)

    项目中用到了Vue.js和Elenment-UI Vue官方文档中给出明确范围:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器. 而且Element-UI支持IE10+及大多数浏览器.由此要用到Babel,主要用于将ECMAScript 2015+代码转换为旧浏览器或环境中向后兼容的JavaScript版本.在此之前,需要先搞清楚IE6~11是否支持es5: IE6~IE8:不支持

  • 分享12个Webpack中常用的Loader(小结)

    目录 前言 style-loader css-loader sass-loader postcss-loader babel-loader ts-loader html-loader file-loader url-loader html-withimg-loader vue-loader eslint-loader 总结 前言 初衷: 整理一些常用的loader分享给大家,方便知道在什么场景下该用什么loader.如果有大佬都懂悄悄左滑就行,不喜勿喷. 适合人群: 前端初级开发. style-

  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    前言 之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情.下面就来看看相关配置篇,感兴趣的可以参考学习. 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-l

  • webpack中CommonsChunkPlugin详细教程(小结)

    webpack中CommonsChunkPlugin详细教程(小结)

    本文介绍了webpack中CommonsChunkPlugin详细教程(小结),分享给大家,也给自己留个笔记,具体如下: 1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version": "1.0.0", "description": "", "main": "index.js&q

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • maptalks+three.js+vue webpack实现二维地图上贴三维模型操作

    我们不是走在坑里就是走在前往坑的路上_(:зゝ∠)_ 最终效果如图:(地图上添加一个"三维地图"的toolbar按钮,点击后在二维地图上贴上建好的三维模型点击显示弹框) 以下都在已经引入并且初始化maptalks地图的基础上,如何引入使用maptalks可以查看以下文章 https://www.jb51.net/article/192983.htm 1.安装maptalks.three包 npm install maptalks.three 2.安装three包 npm install

  • webpack-cli在webpack打包中的作用小结

    webpack-cli在webpack打包中的作用小结

    目录 webpack & webpack-cli webpack Introduction webpack-cli 详解 Reference webpack & webpack-cli webpack Introduction webpack 是一个静态的模块化打包工具,为现代的JavaScript应用程序服务 打包 bundler:webpack可以帮助我们进行打包,所以它是一个打包工具 静态的static:将代码打包成最终的静态资源(部署到静态服务器) 模块化module:webpac

  • 浅谈vue+webpack项目调试方法步骤

    浅谈vue+webpack项目调试方法步骤

    题外话:这几个月用vue写了三个项目了,从绊手绊脚开始慢慢熟悉,婶婶的感到语言这东西还是得有点框框架架,太自由了容易乱搞,特别人多的时候. 从webpack开始 直接进入正题.有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说. -sourcemap webpack配置提供了devtool这个选项,如果设置为 '#source-map',则可以生成.map文件

  • 解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

    解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

    在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容. 第一步,首先新建一个vue+webpack+vuecli的demo,如下操作: 全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令: npm install -g vue-cli 第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作: cd vue_test_project //进入vue_test_

  • Vue+webpack项目基础配置教程

    最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp

随机推荐