Grabar su cosecha dispersa, ensayos.

algunos básica

Babel función es convertir el código JS nuevas características es el código de la mayoría de los navegadores pueden ejecutar.
transcodificación babel se divide en dos partes, una es la conversión sintaxis, una conversión es la nueva API.
Para la conversión API se divide en dos partes, una de las cuales es API privado, un ejemplo de un método estático (Método Array.prototype.includes o similares) y los objetos globales Object.assign similares.
babel transcodificación complemento dependiente, en ningún caso plugin de hacer precisamente babel code => code.
plug-in Hay muchos, uno importado, particularmente problemáticos, esta vez sabemos preestablecido.

es una colección de muchos Plugin preestablecido, la configuración es como sigue:

archivo .babelrc

{
  "presets": ["env"]
}

Si hay una configuración preestablecida artículos-env:

{
  "presets": [
    [
      "env",
      {
        // 这里就是配置项
      }
    ]
  ]
}

Se puede observar si puede necesitar ser reemplazada con una matriz de cadenas una configuración preestablecida, el primer elemento es un nombre predeterminado, el segundo término es opetions. plugin con preestablecido.

Nota: preestablecido se ejecuta de derecha a izquierda, de izquierda a derecha plug-in se ejecuta, y el plugin realiza antes de preset.

babel6 actualización a babel7 es perjudicial, sobre todo polyfill resumen de uso y bajo diferentes babel6 y babel7 en.

babel-polyfill

Se mencionó anteriormente babel hacen principalmente a dos cosas, una es la gramática transformacional, es compatible con una nueva API.

El papel de babel-polyfill es compatible con la nueva API.

babel6

Por lo que yo sé, hay cuatro maneras de utilizar polyfill en babel6 en:

La introducción de la directa (impacto a nivel mundial, de una vez por todas)

En el archivo de entrada import 'babel-polyfill' / require('babel-polyfill'). Webpack utiliza, a continuación, puede agregar la entrada entry: ['babel-polyfill', 'src/index.js'].

Ventajas:
una vez introducido, el uso global.
Los métodos de instancia y métodos estáticos se convierten, más completa.

Desventajas:
impacto de alcance mundial.
Salir de la manada es relativamente grande, no importa inútil haber jugado en él.

escenarios de uso:
desarrollo de proyectos empresariales, más completos, por lo que el problema No se perderán, tales como la necesidad de un enfoque de este tipo Object.assign o polyfill en ios8 anteriormente.
Una introducción separada de la babel-runtime

E introducido directamente en la entrada de diferentes polyfill, polyfill el módulo enchufable se incorpora privado.
Por necesidad polyfill a introducido manualmente,import Promise from 'babel-runtime/core-js/promise'

Pros:
El módulo es privado, no afectará el ámbito global.
Romper el paquete debido a la introducción de paquete en-demanda no será grande.

Contras:
Debido a que no afectan al alcance mundial, por lo que no se volverá instancia y métodos estáticos tales API.
introducción manual de la deseada, es posible que falte.

escenarios de uso:
bibliotecas de desarrollo, marcos y similares pueden utilizarse, como en el caso de otros con su conocimiento de la cosa y luego se cambian a otra persona es medio ambiente global, y luego a un error vergonzoso.
la demanda de uso babel-plugin, transformación y tiempo de ejecución introdujo

Este plugin no fue fácil, hay varias funciones:
1. polyfill y plug-babel-tiempo de ejecución como la introducción de la privada, no afectarán el alcance global. Y la introducción de la demanda polyfill automática requiere, para evitar tener que introducida manualmente por uno como babel-tiempo de ejecución.
2. Puede extraer varias conversión de sintaxis ayudante cuando cada módulo se genera como una referencia.
3. generadores de conversión automática / asincrónicos.
Pros:
El módulo es privado, no afectará el ámbito global.
Romper el paquete debido a la introducción de paquete en-demanda no será grande.
Introducción automática de la demanda, ningún manual, para evitar la omisión.
La extracción de ayudante, reduciendo en gran medida código redundante.

Contras:
Debido a que no afectan al alcance mundial, por lo que no se volverá instancia y métodos estáticos tales API.

escenarios de uso:
con Babel-tiempo de ejecución.

NOTA: El plug-in dependencias babel-tiempo de ejecución.
Dispuesto en un elemento de configuración en babel-preset-env

{
   "presets": [
   	[
   		"env", 
   		{
   			"useBuiltIns": boolean
   		}
   	]
   ]
}

opción useBuiltIns para dividir la entrada import 'babel-polyfill' / require(babel-polyfill)en el medio ambiente mediante la introducción de polyfill. La primera realización se introduce en el mismo polyfill manera, pero serán incorporados según sea necesario de acuerdo con la configuración del entorno, poco mejor.

Resumen:
Core 1. babel6 tiene babel-core babel-cli babel- nodo babel-registro babel-polyfill, estos serán modificados babel7.
2. polyfill depende de las centrales-js
3. babel7.4 abandonado @ babel / polyfill depende directamente de núcleo-js @ 2 o 3.

elemento de configuración babel-plugin, transformación y tiempo de ejecución

{
  "helpers": false, // defaults to true
  "polyfill": false, // defaults to true
  "regenerator": true, // defaults to true
  "moduleName": "babel-runtime" // defaults to "babel-runtime"
}

Para el procesamiento y la extracción de ayudante polyfill dependiente babel-tiempo de ejecución automática que se ha completado, de modo que el plug-in dependencias babel-tiempo de ejecución.

ejemplos polyfill

entrada:

var promise = new Promise;

salida:

var _promise = require("babel-runtime/core-js/promise");  // 注意这里，根本是从core-js里面引入的
 
var _promise2 = _interopRequireDefault(_promise);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var promise = new _promise2.default();

ejemplos de ayuda:

entrada:

class Person {}

por lo general se convierte en:

"use strict";
 // 这就是helper函数，每个模块都会被实现一遍，十分浪费，冗余。
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
var Person = function Person() {
  _classCallCheck(this, Person);
};

Por su vez, el tiempo de ejecución sobre:

"use strict";
 
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck"); // 从runtime中引入，没有再实现一遍
 
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};

generador también se require("babel-runtime/regenerator");introdujo.

babel7

babel7 hizo cambios importantes, abandonó stage-xel preset, también se agrega un espacio de nombres para distinguir entre el núcleo oficial y no oficial plug-in de plug-ins, Babel @ /, @ babel / CLI y así sucesivamente.

Recommended @ babel / preestablecido-env.

@ Babel / plugin, transformación y tiempo de ejecución

La introducción del plug-in tiene dos principal acción

En babel7, el original plug-babel-plugin, transformación y tiempo de ejecución también hizo cambios -> @ babel / plugin, transformación y tiempo de ejecución. Y en función pasa a ser de gran alcance.

Eliminar la configuración artículos polyfill Tim, añadido elementos de configuración corejs (por defecto es polyfill).

configuración .babelrc:

{
  plugins: [
    ["@babel/plugin-transform-runtime", {
      "absoluteRuntime": false, // 不是很清除干啥的
      "corejs": false, // 下面详解
      "helpers": true, // 助手函数是否提取，同babel-plugin-transform
      "regenerator": true, // 同babel-plugin-transform
      "useESModules": false
    }]
  ]
}

Para los elementos de configuración corejs: false | 2 | 3.

falsa dependencia @ babel / tiempo de ejecución, de hecho, y la configuración Polyfill, es la opción predeterminada.
2 dependiente Babel @ / Runtime-corejs2
. 3 dependiente @ babel / runtime-corejs3

corejs2 y todavía corejs3 muy diferente. convert corejs2 únicas variables globales (objeto) y métodos estáticos (Object.assign), no de método de conversión (Array.prototype.includes) sobre el prototipo, se convertirán método corejs3 en el prototipo.

Nota transformar-runtime añadir este plug-polyfill son privados, que no afectará el medio ambiente mundial, sino también exigir la introducción, muy agradable.

Resumen:
@ Babel / plugin-Transform-Runtime tiene tres funciones principales:
- cuando una generators/asyncintroducción automática de tiempo @babel/runtime/regenerator.
- Adición de nuevas características implementadas como API.
- extraer cada módulo de ayuda en línea que pidió referencia.

@ Babel / PRESET-env

Además de lo anterior, dijo @babel/plugin-transform-runtimeenchufe, me gustaría registrar el @babel/preset-envcambio en la polyfill.

Este preset en babel6 cuando tomó una gran cantidad de características, este artículo sólo se registra la configuración relacionada y polyfill, useBuiltInsy corejs.

useBuiltIns

Es un valor booleano en el elemento de configuración preestablecida babel-env-en al @ babel / preestablecido-env cuando la expansión de las varias opciones "useage"y "entry".

El valor predeterminado es falso, no introduciría automáticamente polyfills, y no lo hace la importación proceso "@ babel / polyfill" e importación "corejs".

Nota: babel7.4 se dan por vencidos @babel/polyfill, se propone para ser utilizado directamente corejs.

entrada

Y las opciones verdadera babel-preset-env como automáticamente según las necesidades de la polyfill introducido División de Medio Ambiente. Nota sólo puede ser introducido una vez en la entrada, muchos se quejan.

Usted necesita tener los documentos de entrada import "core-js/stable"y import "regenerator-runtime/runtime".

uso

La introducción de la demanda hará que la contaminación global . A mi entender esta opción es sólo una mejoras principales, la necesidad de introducir un manual en la entrada, y la cantidad de la demanda se puede introducir de acuerdo con las características de uso.

corejs

Encontrado: 2, o 3 { version: 2 | 3, proposals: boolean }, el valor predeterminado es 2.

Este es un elemento de configuración recién agregado. Esta opción única useBuiltInsopción usageo entryy @babel/preset-envfunciona si la versión correcta de los correspondientes corejs importación.

Estabilización de las propiedades de ECMAScript por defecto sólo inyecta. Hay tres características pueden ser modificadas:

En ese momento una configuración useBuiltIns: "entry"se pueden importar directamente Propuestaimport "core-js/proposals/string-replace-all"
En ese momento con useBuiltIns: el uso cuando hay dos opciones:
- Los shippedProposals (otro elemento de configuración @ babel / preestablecido de-env) opción se establece en true. Esto permitirá que la propuesta se han proporcionado desde hace algún tiempo en el polyfill navegador y conversión.
- Uso corejs: {version：3，proposal：true}. Tal relleno para cada núcleo-js apoyar la propuesta se puede lograr.