javascript - tutorial - npm babel-core

Cómo evitar que Babel transpile ''esto'' a ''indefinido''(e inserte “use estricto”)

Question

EDITAR : No se trata de flechas gordas . Tampoco se trata de pasar esto a un IIFE . Es una pregunta relacionada con el transpilador.

Así que he creado un pub-sub simple para una pequeña aplicación en la que estoy trabajando. Lo escribí en ES6 para usar spread / rest y ahorrar algunos dolores de cabeza. Lo configuré con npm y trago para transpilarlo, pero me está volviendo loco.

Lo convertí en una biblioteca de navegador pero me di cuenta de que podía usarse en cualquier lugar, así que decidí hacerlo compatible con Commonjs y AMD.

Aquí hay una versión recortada de mi código:

(function(root, factory) {
 if(typeof define === ''function'' && define.amd) {
    define([], function() {
        return (root.simplePubSub = factory())
    });
  } else if(typeof module === ''object'' && module.exports) {
    module.exports = (root.simplePubSub = factory())
  } else {
    root.simplePubSub = root.SPS = factory()
  }
}(this, function() {
 // return SimplePubSub
});

Pero no importa lo que intente (como convertir esto en una variable y pasarlo), lo establece en indefinido .

}(undefined, function() {

Probablemente tenga algo que ver con que Babel no sepa qué será y lo transforme, pero ¿hay algún otro enfoque que pueda adoptar?

ACTUALIZACIÓN : Pasando }((window || module || {}), function() { lugar de esto parece funcionar. Sin embargo, no estoy seguro de que este sea el mejor enfoque.

Answer 1

Para Babel> = 7.x

El código ES6 tiene dos modos de procesamiento:

• "script": cuando carga un archivo mediante un <script> o cualquier otra forma estándar ES5 de cargar un archivo
• "módulo": cuando un archivo se procesa como un módulo ES6

En Babel 7.x, los archivos se analizan como "módulo" de forma predeterminada. Lo que le está causando problemas es que en un módulo ES6, this undefined está undefined , mientras que en el caso del "script" , esto varía según el entorno, como la window en un script del navegador o las exports en código CommonJS. Del mismo modo, los archivos "module" son estrictamente automáticos, por lo que Babel insertará "use strict"; .

En Babel 7, deberá decirle a Babel de qué tipo es su archivo si desea evitar este comportamiento. La opción más simple sería usar la opción "sourceType" para establecer sourceType: "unambiguous" en sus opciones de Babel, que esencialmente le dice a Babel que adivine el tipo (scripts vs módulo), en función de la presencia de declaraciones de import y export . La desventaja principal es que técnicamente está bien tener un módulo ES6 que no use import o export , y esos serían tratados incorrectamente como scripts. Por otro lado, eso realmente no es tan común.

Alternativamente, puede usar la opción de "overrides" Babel 7 para configurar archivos específicos como scripts, por ejemplo

overrides: [{
  test: "./vendor/something.umd.js",
  sourceType: "script",
}],

Cualquiera de los dos enfoques permite a Babel saber que algunos archivos son tipos de script y, por lo tanto, no deberían tener this convertido a undefined .

Para Babel <7.x

El código ES6 tiene dos modos de procesamiento:

• "script": cuando carga un archivo mediante un <script> o cualquier otra forma estándar ES5 de cargar un archivo
• "módulo": cuando un archivo se procesa como un módulo ES6

Al usar Babel 6 y babel-preset-es2015 (o Babel 5), Babel asume de manera predeterminada que los archivos que procesa son módulos ES6. Lo que le está causando problemas es que en un módulo ES6, this undefined está undefined y los archivos son estrictos, mientras que en el caso del "script", this varía según el entorno, como la window en un script del navegador o las exports en código CommonJS.

Si está usando Babel, la opción más fácil es escribir su código sin el contenedor UMD y luego agrupar su archivo usando algo como Browserify para agregar automáticamente el contenedor UMD. Babel también proporciona un babel-plugin-transform-es2015-modules-umd . Ambos están orientados a la simplicidad, por lo que si desea un enfoque UMD personalizado, puede que no sean para usted.

Alternativamente, necesitaría enumerar explícitamente todos los complementos de Babel en babel-preset-es2015 , asegurándose de excluir el babel-plugin-transform-es2015-modules-commonjs procesamiento de módulos babel-plugin-transform-es2015-modules-commonjs . Tenga en cuenta que esto también detendrá la adición automática de use strict ya que eso también es parte de la especificación ES6, es posible que desee volver a agregar babel-plugin-transform-strict-mode para mantener su código estricto automáticamente.

A partir de [email protected] preajustes pueden tomar opciones, por lo que también puede hacer

{
  "presets": [
    [ "es2015", { "modules": false } ]
  ]
}

en su configuración de Babel ( .babelrc ) para usar babel-preset-es2015 con el procesamiento del módulo deshabilitado.

Answer 2

El preajuste "es2015" envuelve la salida de Babel en un contenedor commonJs de forma predeterminada. Utilice "babel-preset-es2015-script" (debe npm install --save babel-preset-es2015-script primero) para generar "script" (sin módulos). Esto estaba causando estragos en otras bibliotecas que estaba terminando usando Babel.

El preajuste: https://www.npmjs.com/package/babel-preset-es2015-script