精华内容
下载资源
问答
  • export default ( ) => { fetch ( "https://google.com" ) . then ( response => response . text ( ) ) . then ( text => console . log ( text ) ) . catch ( e => console . error ( e ) ) ;
  • Nuxt-Polyfill 轻松将polyfill添加到您的Nuxt.js项目。 需要Nuxt> = 2 特征 :check_mark: 易于配置 ... export default { // Configure polyfills: polyfill : { features : [ /* Feature without
  • export function getImg(str) { let imgs = str.match(/<img.+?>/gi); imgs = imgs.map(function(item, index) { //提取出src let _src = item.matc...

    说明

    记录一些 js 实用的方法

    从字符串中提取 img 标签,获取每个 img 的 src

    export function getImg(str) {
      let imgs = str.match(/<img.+?>/gi);
      imgs = imgs.map(function(item, index) {
        //提取出src
        let _src = item.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i)[1];
        // console.log("_src", _src);
        return '<img src="' + _src + '" width="100%">';
      });
    }
    

    DOM获取

    export function getEle(el) {
      return document.querySelector(el);
    }
    export function getEles(el) {
      return document.querySelectorAll(el);
    }
    

    判断字符串是否以给定字符“结尾”

    endsWith() 方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false。

    str.endsWith(searchString [, position]);
    

    参数:

    • searchString, 要搜索的子字符串
    • position, 可选。作为 str 的长度,默认值为 str.length。
    var str = "To be, or not to be, that is the question.";
    
    alert( str.endsWith("question.") );  // true
    alert( str.endsWith("to be") );      // false
    alert( str.endsWith("to be", 19) );  // true
    

    这个方法已经加入到 ECMAScript 6 标准当中,但是可能还没有在所有的 JavaScript 实现中可用。

    polyfill:

    	if (!String.prototype.endsWith) {
    		String.prototype.endsWith = function(search, this_len) {
    			if (this_len === undefined || this_len > this.length) {
    				this_len = this.length;
    			}
    			return this.substring(this_len - search.length, this_len) === search;
    		};
    	}
    	
    

    判断数据类型

     isType(params, type) {
        // 判断数据类型
        // String Number Boolean Undefined Null Object Array Function HTMLDocument HTMLDocument
        return Object.prototype.toString.call(params) === "[object " + type + "]";
      }
    

    判断一个数组是否包含一个指定的值

    includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

    arr.includes(searchElement, fromIndex)
    

    参数:

    • searchElement,需要查找的元素值
    • fromIndex,可选,从该索引处开始查找 searchElement。如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索。如果为负值,则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0。
    [1, 2, 3].includes(2);     // true
    [1, 2, 3].includes(4);     // false
    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    [1, 2, NaN].includes(NaN); // true
    

    includes() 方法有意设计为通用方法。它不要求 this 值是数组对象,所以它可以被用于其他类型的对象 (比如类数组对象)。下面的例子展示了 在函数的 arguments 对象上调用的 includes() 方法。

    (function() {
      console.log([].includes.call(arguments, 'a')); // true
      console.log([].includes.call(arguments, 'd')); // false
    })('a','b','c');
    

    Polyfill

    // https://tc39.github.io/ecma262/#sec-array.prototype.includes
    if (!Array.prototype.includes) {
      Object.defineProperty(Array.prototype, 'includes', {
        value: function(searchElement, fromIndex) {
    
          // 1. Let O be ? ToObject(this value).
          if (this == null) {
            throw new TypeError('"this" is null or not defined');
          }
    
          var o = Object(this);
    
          // 2. Let len be ? ToLength(? Get(O, "length")).
          var len = o.length >>> 0;
    
          // 3. If len is 0, return false.
          if (len === 0) {
            return false;
          }
    
          // 4. Let n be ? ToInteger(fromIndex).
          //    (If fromIndex is undefined, this step produces the value 0.)
          var n = fromIndex | 0;
    
          // 5. If n ≥ 0, then
          //  a. Let k be n.
          // 6. Else n < 0,
          //  a. Let k be len + n.
          //  b. If k < 0, let k be 0.
          var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    
          // 7. Repeat, while k < len
          while (k < len) {
            // a. Let elementK be the result of ? Get(O, ! ToString(k)).
            // b. If SameValueZero(searchElement, elementK) is true, return true.
            // c. Increase k by 1.
            // NOTE: === provides the correct "SameValueZero" comparison needed here.
            if (o[k] === searchElement) {
              return true;
            }
            k++;
          }
    
          // 8. Return false
          return false;
        }
      });
    }
    

    数组内容位置排序

    export var arraySort = {
      arr: null,
      init(_arr) {
        if (this.typeof(_arr, "Array")) {
          this.arr = _arr;
        } else {
          throw new TypeError("Initialization data type is not an array");
        }
      },
      swapArray(x, y) {
      	// 交换数组中两个索引处的元素
        this.arr.splice(x, 1, ...this.arr.splice(y, 1, this.arr[x]));
      },
      sortUp(index) {
        if (index != 0) {
          this.swapArray(index, index - 1);
        }
      },
      sortDown(index) {
        if (index != this.arr.length - 1) {
          this.swapArray(index, index + 1);
        }
      },
      del(_index, callback) {
        if (this.typeof(callback, "Function")) {
          if (callback()) {
            this.arr.splice(_index, 1);
          }
        } else {
          if (this.arr.length > 1) {
            this.arr.splice(_index, 1);
          }
        }
      },
      typeof(params, type) {
        // 判断数据类型
        // String Number Boolean Undefined Null Object Array Function HTMLDocument HTMLDocument
        return Object.prototype.toString.call(params) === "[object " + type + "]";
      }
    };
    
    展开全文
  • export const apiKey = 'abc123'; export const age = 12; export function greet(name){ }; // import { apiKey ,age , greet} from './config' slug:可以将各种各样的用户名转换成-连接的用户名,地址:...

    1.ES6模块

    //config.js
    export const apiKey = 'abc123';
    export const age = 12;
    
    export function greet(name){
    
    };
    
    //
    import { apiKey ,age , greet} from './config'
    

    slug:可以将各种各样的用户名转换成-连接的用户名,地址:https://www.npmjs.com/package/slug

    2.使用SystemJS打包ES模块

    和Webpack一样是打包工具,但是不用复杂配置。

    https://www.npmjs.com/package/systemjs

    3.Babel

    babel中文网:https://www.babeljs.cn/

    4.Polyfill

    babel只能转换语法而不是去增加或修改原有ES6新的属性和方法。polyfill就是为了解决这种情况,也能抚平不同浏览器之间对js实现的差异。

    babel/polyfill使用:https://www.babeljs.cn/docs/babel-polyfill

    5.原型继承

    //ES5的原型继承
    function User(name,email){
    	this.name = name;
    	this.email = email;
    }
    
    User.prototype.info = function(){
    	console.log('Hi I am ...');
    }
    
    const codecasts = new User('','');
    codecasts.info()
    
    //ES6的class继承
    class User{
    	//类中构造函数
    	constructor(name,email){
    		this.name = name;
    		this.email = email;
    	}
    	//类中方法
    	info(){
    
    	}
    	//静态方法(只能在原型对象上调用,不能在实例上调用,例如Array.from())
    	static description(){
    
    	}
    	
    	//get/set设置和获取属性
    	set github(value){
    		this.girhubName = value;
    	}
    	get github(){
    		return `https://github.com/${this.githubName}`
    	}
    
    }
    
    const codecasts = new User('','');
    codecasts.github = 'laravist';
    codecasts.github
    

    ES5和ES6的继承:

    专门写一篇介绍

    6.类的扩展

    继承一个类:

    class Aimal{
    	constructor(name){
    		this.name;
    		this.belly = [];
    	}
    	
    	eat(food){
    		this.belly.push(food);
    	}
    
    }
    
    class Dog extends Animal{
    	constructor(name,age){
    		super(name);   //类似于es5的Animal.call(this,name,age);
    		this.age = age;
    	}
    	bark(){
    		console.log('');
    	}
    }
    
    const lucky = new Dog('lucky',2);
    lucky
    

    子类必须在constructor方法里调用super方法,否则不能新建实例。这是因为子类没有属于自己的this对象,而是继承了父类的this对象而对其进行加工。显然,只有调用了super方法之后,才可以使用this。

    7.ES6的class扩展内建对象数组

    下面两种继承方式输出结果不一样

    //1 super()创建this值指向基类Array,MyArray这个子类在这个基类this上修改,所以this的值可以访问基类上的功能的
    class MyArray extends Array{
    	constructor(){
    		super();
    	}
    }
    
    //2 子类MyArray创建this的值,this的值指向MyArray的实例,然后调用基类构造函数,Array的其他属性会修饰这个this
    function MyArray(){
    	Array.apply(this,arguments);
    }
    
    const colors = new MyArray();
    colors[0] = 'red';
    console.log(colors.length);   //undefined
    
    colors.length = 0;
    console.log(colors[0])   //red
    
    展开全文
  • 对于这些新增的api,需要polyfill去做兼容。babel提供了两个plugin来处理这些api的polyfill。@babel/preset-env如果使用preset-env来处理polyfill,需要安装@babel/polyfill。@babel/preset-...

    前言

    babel只能转义ES6语法,比如箭头函数,但是遇到ES6新增的api就无能为力了,比如Promise和includes。对于这些新增的api,需要polyfill去做兼容。babel提供了两个plugin来处理这些api的polyfill。

    @babel/preset-env

    如果使用preset-env来处理polyfill,需要安装@babel/polyfill。

    @babel/preset-env通过配置项,能够智能的帮你处理ES6的语法。它通过读取项目中的browserslist配置,来决定需要对哪些语法进行处理。一个配置的例子

    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
               "chrome": "58",
               "ie": "11"
            }
            "useBuiltIns": "entry",
            "modules": false,
            
          }
        ]
      ]
    }
    复制代码

    options.targets

    用来配置需要支持的的环境,不仅支持浏览器,还支持node。

    如果没有配置targets选项,就会读取项目中的browserslist配置项。

    options.loose

    默认值是false,如果preset-env中包含的plugin支持loose的设置,那么可以通过这个字段来做统一的设置。

    options.modules

    "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false,默认值是auto

    用来转换ES6的模块语法。如果使用false,将不会对文件的模块语法进行转化。

    如果要使用webpack中的一些新特性,比如tree shaking 和 sideEffects,就需要设置为false,对ES6的模块文件不做转化,因为这些特性只对ES6的模块有效。

    options.useBuiltIns

    "usage" | "entry" | false,默认值是false

    这个配置项主要是用来处理@babel/polyfill。

    • 设置为false时,会把@babel/polyfill这个包引进来,忽略targets配置项和项目里的browserslist配置
    • 设置为entry时,在整个项目里,只需要引入一次@babel/polyfill,它会根据targets和browserslist,然后只加载目标环境不支持的api文件
    • 设置为usage时,babel会在目标环境的基础上,只加载项目里用的那些不支持的api的文件,做到按需加载

    其他的一些配置项可以看 官方文档

    @babel/plugin-transform-runtime

    这个插件可以通过一些helper函数的注入来减少语法转换函数的开销。

    const c = {...b};
    复制代码

    通过babel编译以后,对象的解构语法会被编译为下面的文件

    var _extends = Object.assign || function (target) { 
      for (var i = 1; i < arguments.length; i++) { 
        var source = arguments[i]; 
        for (var key in source) { 
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];   
          }
        }
      } 
      return target;
    };
    
    var c = _extends({}, b);
    复制代码

    如果很多文件都用到了解构语法,那么每个文件都会生成一个相同的_extends方法,@babel/plugin-transform-runtime会使用helper函数来处理对应的语法,避免这种重复定义方法的问题,使用这个插件后,会生成下面的文件

    var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
    var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
    
    var c = (0, _objectSpread2.default)({}, b);
    复制代码

    对插件进行配置

    {
      "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {
            "corejs": false,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
          }
        ]
      ]
    }
    复制代码

    babel7相比于babel6,删除了polyfill和useBuiltIns这两个配置。

    options.corejs

    boolean or number,默认值是false

    e.g. ['@babel/plugin-transform-runtime', { corejs: 2 }]

    当设置为false时,只对语法进行转换,不对api进行处理

    当设置为2的时候,需要安装@babel/runtime-corejs2,这时会对api进行处理。这里需要注意,不能polyfill Array.includes这种需要重写property的api,这种会污染全局变量,需要在项目里使用@babel/polyfill来处理。

    options.helpers

    默认值是true,用来开启是否使用helper函数来重写语法转换的函数。

    options.useESModules

    默认值是false,是否对文件使用ES的模块语法,使用ES的模块语法可以减少文件的大小。

    // useESModules:false
    
    exports.__esModule = true;
    
    exports.default = function(instance, Constructor) {
      if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
      }
    };
    复制代码
    // useESModules:true
    
    export default function(instance, Constructor) {
      if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
      }
    }
    复制代码

    @babel/plugin-transform-runtime默认情况下安装@babel/runtime这个库,即corejs为false时使用;当corejs设置为2时,需要安装使用@babel/runtime-corejs2。runtime和runtime-corejs2这两个库唯一的区别是,corejs2这个库增加了对core-js这个库的依赖,而core-js是用来对ES6各个语法polyfill的库,所以在corejs为false的情况下,只能做语法的转换,并不能polyfill任何api。

    @babel/polyfill && @babbel/runtime

    polyfill和runtime都可以用来对api进行垫片处理,但是两者还有一定的不同。使用polyfill的时候,会污染全局变量;而runtime的时候,会使用局部变量来处理,不会污染全局变量。这也是为什么runtime无法处理原型上的api的原因,因为要模拟这些api,必须要污染全局变量。

    core-js

    @babel/polyfill和@babel/runtime-corejs2都使用了core-js(v2)这个库来进行api的处理。

    这个库有两个核心的文件夹,分别是library和modules。runtime使用library这个文件夹,polyfill使用modules这个文件夹。

    • library使用helper的方式,局部实现某个api,不会污染全局变量
    • modules以污染全局变量的方法来实现api

    library和modules包含的文件基本相同,最大的不同是_export.js这个文件。

    core-js/modules/_exports.js文件如下

    var global = require('./_global');
    var core = require('./_core');
    var hide = require('./_hide');
    var redefine = require('./_redefine');
    var ctx = require('./_ctx');
    var PROTOTYPE = 'prototype';
    
    var $export = function (type, name, source) {
      var IS_FORCED = type & $export.F;
      var IS_GLOBAL = type & $export.G;
      var IS_STATIC = type & $export.S;
      var IS_PROTO = type & $export.P;
      var IS_BIND = type & $export.B;
      var target = IS_GLOBAL ? global : IS_STATIC ? global[name] || (global[name] = {}) : (global[name] || {})[PROTOTYPE];
      var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});
      var expProto = exports[PROTOTYPE] || (exports[PROTOTYPE] = {});
      var key, own, out, exp;
      if (IS_GLOBAL) source = name;
      for (key in source) {
        // contains in native
        own = !IS_FORCED && target && target[key] !== undefined;
        // export native or passed
        out = (own ? target : source)[key];
        // bind timers to global for call from export context
        exp = IS_BIND && own ? ctx(out, global) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
        // extend global
        if (target) redefine(target, key, out, type & $export.U);
        // export
        if (exports[key] != out) hide(exports, key, exp);
        if (IS_PROTO && expProto[key] != out) expProto[key] = out;
      }
    };
    global.core = core;
    // type bitmap
    $export.F = 1;   // forced
    $export.G = 2;   // global
    $export.S = 4;   // static
    $export.P = 8;   // proto
    $export.B = 16;  // bind
    $export.W = 32;  // wrap
    $export.U = 64;  // safe
    $export.R = 128; // real proto method for `library`
    module.exports = $export;
    复制代码

    core-js/library/_exports.js文件如下

    var global = require('./_global');
    var core = require('./_core');
    var ctx = require('./_ctx');
    var hide = require('./_hide');
    var has = require('./_has');
    var PROTOTYPE = 'prototype';
    
    var $export = function (type, name, source) {
      var IS_FORCED = type & $export.F;
      var IS_GLOBAL = type & $export.G;
      var IS_STATIC = type & $export.S;
      var IS_PROTO = type & $export.P;
      var IS_BIND = type & $export.B;
      var IS_WRAP = type & $export.W;
      var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});
      var expProto = exports[PROTOTYPE];
      var target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE];
      var key, own, out;
      if (IS_GLOBAL) source = name;
      for (key in source) {
        // contains in native
        own = !IS_FORCED && target && target[key] !== undefined;
        if (own && has(exports, key)) continue;
        // export native or passed
        out = own ? target[key] : source[key];
        // prevent global pollution for namespaces
        exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
        // bind timers to global for call from export context
        : IS_BIND && own ? ctx(out, global)
        // wrap global constructors for prevent change them in library
        : IS_WRAP && target[key] == out ? (function (C) {
          var F = function (a, b, c) {
            if (this instanceof C) {
              switch (arguments.length) {
                case 0: return new C();
                case 1: return new C(a);
                case 2: return new C(a, b);
              } return new C(a, b, c);
            } return C.apply(this, arguments);
          };
          F[PROTOTYPE] = C[PROTOTYPE];
          return F;
        // make static versions for prototype methods
        })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
        // export proto methods to core.%CONSTRUCTOR%.methods.%NAME%
        if (IS_PROTO) {
          (exports.virtual || (exports.virtual = {}))[key] = out;
          // export proto methods to core.%CONSTRUCTOR%.prototype.%NAME%
          if (type & $export.R && expProto && !expProto[key]) hide(expProto, key, out);
        }
      }
    };
    // type bitmap
    $export.F = 1;   // forced
    $export.G = 2;   // global
    $export.S = 4;   // static
    $export.P = 8;   // proto
    $export.B = 16;  // bind
    $export.W = 32;  // wrap
    $export.U = 64;  // safe
    $export.R = 128; // real proto method for `library`
    module.exports = $export;
    
    复制代码

    可以看出,library下的这个$export方法,会实现一个wrapper函数,防止污染全局变量。

    var p = new Promise();
    
    
    // @babel/polyfill
    require("core-js/modules/es6.promise");
    var p = new Promise();
    
    
    // @babel/runtime-corejs2
    var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
    var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise"));
    var a = new _promise.default();
    
    复制代码

    从上面这个例子可以看出,对于Promise这个api,@babel/polyfill引用了core-js/modules中的es6.promise.js文件,因为是对全局变量进行处理,所以赋值语句不用做处理;@babel/runtime-corejs2会生成一个局部变量_promise,然后把Promise都替换成_promise,这样就不会污染全局变量了。

    项目和库开发

    在项目开发的时候,使用@babel/polyfill;在开发库的时候,使用runtime。

    如果在库开发的时候,用到了一些新的api,可以选择不要处理,把选择权留给开发者,让开发者在项目中使用@babel/polyfill去处理。

    因为在项目中都会排除node_modules里面的js文件,加快项目的编译速度。出于这个考虑,不建议使用把env的useBuiltIns设置为usage,这样可能会导致node_modules里面的库使用了某些需要polyfill的api,但是我们又没有引入对应的polyfill文件,在某些环境会出现bug。

    在项目里,建议使用entry这个配置,并配合browserslist,对于某些已经被目标环境支持的api不用引入对应的polyfill文件,减少项目的文件体积。


    展开全文
  • 和声2 Webpack2 Polyfill 插件 为 Webpack2 插入 polyfills 包括: 承诺 函数.prototype.bind ...webpack2-polyfill-plugin ...Webpack2Polyfill ..."webpack2-polyfill-plugin" ...Webpack2Polyfill ...Export)。 执
  • export default function () { return { visitor: { Identifier(path) { const name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split("").reverse().join(""); } } ...

    前言

    为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。

    babel 和 babel ployfill 的关系

    1、先来理解下 babel 到底是做什么的?

    简单来讲, babel解决 语法层面的问题。用于将ES6+的高级语法转为ES5。

    2、babel polyfill 又是做什么的?

    如果要解决 API层面的问题,需要使用垫片。比如常见的有 babel-polyfillbabel-runtime 和  babel-plugin-transform-runtime

    理清了他们之间的关系,那么再正式来讲讲有关polyfill的二三事。

    polyfill 种类

    babel polyfill 有三种

    * babel-polyfill
    * babel-runtime
    * babel-plugin-transform-runtime

    babel-polyfill

    babel-polyfill通过向全局对象和内置对象的prototype上添加方法来实现的。所以这会造成全局空间污染。

    babel-polyfill使用的两种方式

    1、webpack.config.js 中:
    配置webpack.config.js里的entry设置为entry: ['babel-polyfill',path.join(__dirname, 'index.js')]

    2、业务 js 中:
    webpack.config.js配置的主入口index.js文件的最顶层键入

    import 'babel-polyfill'

    两者打印出来的大小都是一样的,打包后大小是280KB,如果没有使用babel-polyfill,大小是3.43kb。两则相差大概81.6倍。原因是webpackbabel-polyfill整体全部都打包进去了。而babel-polyfill肯定也实现了所有ES6新API的垫片,文件一定不会小。

    那么有没有一种办法,根据实际代码中用到的ES6新增API ,来使用对应的垫片,而不是全部加载进去呢?
    是的,有的。那就是 babel-runtime & babel-plugin-transform-runtime,他们可以实现按需加载。

    babel-runtime

    简单说 babel-runtime 更像是一种按需加载的实现,比如你哪里需要使用 Promise,只要在这个文件头部

    import Promise from 'babel-runtime/core-js/promise'

    就行了。

    不过如果你许多文件都要使用 Promise,难道每个文件都要 import 一下吗?当然不是,Babel 官方已考虑这种情况,只需要使用 babel-plugin-transform-runtime 就可以解决手动 import 的苦恼了。

    babel-plugin-transform-runtime

    babel-plugin-transform-runtime 装了就不需要装 babel-runtime了,因为前者依赖后者。
    总的来说,babel-plugin-transform-runtime 就是可以在我们使用新 API 时 自动 import babel-runtime 里面的 polyfill,具体插件做了以下三件事情:

    • 当我们使用 async/await 时,自动引入 babel-runtime/regenerator

    • 当我们使用 ES6 的静态事件或内置对象时,自动引入 babel-runtime/core-js

    • 移除内联 babel helpers 并替换使用 babel-runtime/helpers 来替换

    babel-plugin-transform-runtime 优点:

    • 不会污染全局变量

    • 多次使用只会打包一次

    • 依赖统一按需引入,无重复引入,无多余引入

    • 避免 babel 编译的工具函数在每个模块里重复出现,减小库和工具包的体积

    使用方式

    在 .babelrc 中配置:

    plugins:\["tranform-runtime"\]

    打包后大小为 17.4kb,比之前的280kb要小很多。

    Plugin 插件

    1、官方 Presets

    如果不想自己设置一堆插件的话,官方有envreactflow三个 Presets。即预安装了 plugins 的配置。

    presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性, presets 是一组 Plugins 的集合。如:
    babel-preset-es2015: 可以将es6的代码编译成es5 
    babel-preset-es2016: 可以将es7的代码编译为es6 
    babel-preset-es2017: 可以将es8的代码编译为es7 
    babel-preset-latest: 支持现有所有ECMAScript版本的新特性

    当我们需要转换es6语法时,可以在 .babelrc 的 plugins 中按需引入一下插件,比如:check-es2015-constantses2015-arrow-functionses2015-block-scoped-functions等等几十个不同作用的 plugin。.babelrc 中配置项可能是如下方式:

    {
      "plugins": \[
        "check-es2015-constants",
        "es2015-arrow-functions",
        "es2015-block-scoped-functions",
        // ...
      \]
    }

    但 Babel 团队为了方便,将同属 ES2015 的几十个 Transform Plugins 集合到 babel-preset-es2015 一个 Preset 中,这样我们只需要在 .babelrc 的 presets 加入 ES2015 一个配置就可以完成全部 ES2015 语法的支持了。.babelrc 中配置如下:

    {
      "presets": \[
        "es2015"
      \]
    }

    2、Stage-X(试验性 Presets)

    这个比较好理解,就是为了支持 TC39 对于草案阶段的 ES 最新特性而开发的 presets。

    • Stage 0 - 草稿:只是一个设想可能是一个 Babel 插件

    • Stage 1 - 提案:值得去推进的东西

    • Stage 2 - 草案:初始化规范

    • Stage 3 - 候选:完整规范和初始化浏览器实现

    • Stage 4 - 完成:会加入到下一版中

    3、转换插件

    官方和民间提供了很多的转换插件,用于指定对某一项 ES 高级特性进行转换。
    官方见:https://babeljs.io/docs/en/pl...

    4、语法插件

    这种插件可以让Babel来解析特殊类型的语法。

    {
      "parserOpts": {
        "plugins": \["jsx", "flow"\]
      }
    }

    5、插件开发

    见文档:https://github.com/jamiebuild...

    开发采用了 AST 抽象语法树,类似于 Eslint 插件开发。

    export default function () {
      return {
        visitor: {
          Identifier(path) {
            const name = path.node.name;
            // reverse the name: JavaScript -> tpircSavaJ
            path.node.name = name.split("").reverse().join("");
          }
        }
      };
    }

    webpack 中使用 babel 二三事

    babel 用途是语法转换,所以webpack 中需要用到 babel-loader。而 babel-core 是 Babel 编译器的核心,因此也就意味着如果我们需要使用 babel-loader 进行 es6 转码的话,我们首先需要安装 babel-core

    总结

    使用场景建议:

    • 开发应用建议使用 babel-polyfill 会在全局新增对应方法

    • 开发框架建议 babel-plugin-transform-runtime 局部变量 不会污染全局,局部使用es6的函数或方法

    以上,如有写的不正确或者有疑问的地方请留言。未完待续,本文会持续更新babel相关知识。

    • 作者:Allan91

    • https://segmentfault.com/a/1190000021729561

    展开全文
  • export default Route . extend ( { model ( ) { return fetch ( '/my-cool-end-point.json' ) . then ( function ( response ) { return response . json ( ) ; } ) ; } } ) ; 可用进口: import fetch , { ...
  • babel-polyfill的几种使用方法

    千次阅读 2019-05-14 19:09:29
    前言 preset与plugin的关系: ...babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill 使用转换插件:babel-plugin-transform-xxx 使用方法 缺啥补啥,在pac...
  • 下,babel-preset-env 也支持针对指定目标环境选择需要的 polyfill 了,只需引入 babel-polyfill,并在 babelrc 中声明 useBuiltIns,babel 会将引入的 babel-polyfill 自动替换为所需的 polyfill。 # .babelrc { ...
  • export default Ember . Component . extend ( { router : Ember . inject . service ( ) , actions : { next ( ) { this . get ( 'router' ) . transitionTo ( 'other.route' ) ; } } } ) ; 已知的不兼容性 ...
  • @babel/polyfill 的使用及效果

    千次阅读 2018-10-31 10:28:00
    export default async function() { console.log('hello'); } 单纯的输出了一个async方法。 然后我们开始打包,此时useBuiltIns的取值是usage,targets开启了ie 11: dist/index.js "use strict"; require...
  • babel7-按需加载polyfill

    2018-12-05 15:54:00
    Error: Plugin/Preset files are not allowed to export objects, only functions. 效果 看下useBuiltIns:usage的效果。"debug"选项开到true,可以看到打包的文件。 我用es6摘抄了一些语法,用来测试编译: ...
  • 这次乘着学习fetch,由于fetch在主流浏览器兼容性并不高,所以需要用到fetch-polyfill的机会,学习巩固一下babel7. polyfill目前没有准确的翻译。直译是填充物的意思,即引入了对应语法的poly...
  • import 'babel-polyfill'//可以解决IE不显示问题 引入的时候没有路径的一般都默认是从node_modules里引入,具体是从哪里引入可以看配置文件 import OneUi from 'one-ui' import 'one-ui/lib/theme-chalk/index.css' ...
  • index.js通过巧妙地方式实现单例 所以,当首次调用resize-observer时 import ResizeObserver from 'resize-observer-polyfill' 它会返回ResizeObserver类,以下是源码 import {Map} from './shims/es6-collections....
  • REFRESH_DELAY observers的最小更新间隔 tansitionKeys resize-observer-polyfill默认会监听这几个属性(根据其注释的描述,似乎会监视名字中包含这些字符串的属性) mutationObserverSupported 通过typeof返回当前...
  • 加入 babel-polyfill 后,打包好的 pollyfill.js 一下子增加到了 251kb(未压缩),(建议感兴趣的同学把代码拉下来运行一下,之后提到的所有方式也都可以看到打包结果)搜索一下 polyfill.js 不难找到这样的全局...
  • smoothscroll-polyfill 是什么? 它是一款纯JS页面的平滑滚动插件。该插件的特点是页面滚动的行为被作为window对象的扩展,用户可以通过window对象直接调用平滑滚动的方法。 官方介绍及Demo GitHub源码地址 ...
  • resizeObserver.observe(): 监听一个dom元素 resizeObserver.unobserve(): 注销掉监听的dom元素 安装: npm i resize-observer-polyfill --save-dev 示例 实现当元素的高度发生改变的时候,实时展示现在的高度。...
  • 下,babel-preset-env 也支持针对指定目标环境选择需要的 polyfill 了,只需引入 babel-polyfill,并在 babelrc 中声明 useBuiltIns,babel 会将引入的 babel-polyfill 自动替换为所需的 polyfill。 # .babelrc {...
  • #indexOf if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(searchElement, fromIndex) { var k; if (this =...
  • export default class ResizeObserverEntry { /** * Element size of which has changed. * Spec: https://wicg.github.io/ResizeObserver/#dom-resizeobserverentry-target * * @readonly * @type {Element} */ ...
  • 这是resize-observer-polyfill源码解读的第三章,在上一章的末尾,由于ResizeObserverController类内部没有调用自身内部的函数,并且controller作为单例参数被传入到了ResizeObserverSPI内。所以对于controller的...
  • Blob.js 和Export2Excel.js文件

    千次阅读 2020-05-21 15:43:24
    Export2Excel.js /* eslint-disable */ require('script-loader!file-saver'); require('./Blob'); require('script-loader!xlsx/dist/xlsx.core.min'); function generateArray(table) { var out = []; var rows =...
  • export class B extends A { public Pro2:string ="Pro2"; private fPro2:string ="fPro2"; constructor(para:string){ super(); //构造器重载 this.fPro2 = para ; } public Method2(){ } //方法...
  • Map Export——地图导出

    千次阅读 2017-06-30 14:18:28
    Example of exporting a map as a PNG image. This example requires a browser that supports canvas.toBlob(). 把地图导出为PNG图片的例子。这个例子需要你的浏览器支持canvas.toBlob()。... Map Export
  • function foo() { export default 'bar' // SyntaxError } foo() export default 命令 用到export default命令,为模块指定默认输出。export default命令只能使用一次 // export-default.js export default ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,350
精华内容 1,740
关键字:

exportpolyfill

友情链接: python基础笔记html.zip