babel.js（一）：babel-standalone.js（

作者: 青叶小小 | 来源:发表于2021-03-06 23:39 被阅读0次

babel.js（二）：babel-standalone.js加
babel.js（一）：babel-standalone.js（
react学习（2）
babel.js的使用
Babel
一个es6兼容性写法的问题
简单的配置babel.js 编译环境
。一一,一,一,一。
一一
一一

一、babel-standalone.js是啥？

bable-standalone.js是为非NodeJS环境而生的babel库，可以直接在html中，通过<script src='...'></script>方式被引入，它包含了所有Bable标准的plugins和presets，当然，也提供精简（压缩）版本babili.js / babili.min.js（即bable-minify）

二、为啥需要babel-standalone.js？

通常，我们使用官方或是第三方脚手架or打包工具（Webpack、Browserify、Gulp），通过配置化引入babel-loader，在编译阶段就完成了直接翻译，所以，这个js是否多余？

其实不然，这个工具还是有其使用场景的：

调试React源码；
在线实时javascript编辑器网站（如 JSFiddle, JS Bin, REPL on the Babel ）；
直接嵌入到应用中，例如：V8 javascript 引擎；
其它开发语言（ ReactJS.NET, ruby-babel-transpiler 等）；

三、引入方式

Github源码：babel-standalone

HTML中直接嵌入：[通过UNPKG获取最新版本](PKG: https://unpkg.com/babel-standalone)

四、附录：

babel-standalone-babili 精简版本引入的babel plugins & presets:

registerPlugins({
  'minify-constant-folding': require('babel-plugin-minify-constant-folding'),
  'minify-dead-code-elimination': require('babel-plugin-minify-dead-code-elimination'),
  'minify-empty-function': require('babel-plugin-minify-empty-function'),
  'minify-flip-comparisons': require('babel-plugin-minify-flip-comparisons'),
  'minify-guarded-expressions': require('babel-plugin-minify-guarded-expressions'),
  'minify-infinity': require('babel-plugin-minify-infinity'),
  'minify-mangle-names': require('babel-plugin-minify-mangle-names'),
  'minify-replace': require('babel-plugin-minify-replace'),
  'minify-simplify': require('babel-plugin-minify-simplify'),
  'minify-type-constructors': require('babel-plugin-minify-type-constructors'),
  'transform-inline-environment-variables': require('babel-plugin-transform-inline-environment-variables'),
  'transform-member-expression-literals': require('babel-plugin-transform-member-expression-literals'),
  'transform-merge-sibling-variables': require('babel-plugin-transform-merge-sibling-variables'),
  'transform-minify-booleans': require('babel-plugin-transform-minify-booleans'),
  'transform-node-env-inline': require('babel-plugin-transform-node-env-inline'),
  'transform-property-literals': require('babel-plugin-transform-property-literals'),
  'transform-remove-console': require('babel-plugin-transform-remove-console'),
  'transform-remove-debugger': require('babel-plugin-transform-remove-debugger'),
  'transform-simplify-comparison-operators': require('babel-plugin-transform-simplify-comparison-operators'),
  'transform-undefined-to-void': require('babel-plugin-transform-undefined-to-void'),
});
registerPreset('babili', require('babel-preset-babili'));

babel-standalone 完全版本引入的babel plugins & presets:

// All the plugins we should bundle
registerPlugins({
  'check-es2015-constants': require('babel-plugin-check-es2015-constants'),
  'external-helpers': require('babel-plugin-external-helpers'),
  'inline-replace-variables': require('babel-plugin-inline-replace-variables'),
  'syntax-async-functions': require('babel-plugin-syntax-async-functions'),
  'syntax-async-generators': require('babel-plugin-syntax-async-generators'),
  'syntax-class-constructor-call': require('babel-plugin-syntax-class-constructor-call'),
  'syntax-class-properties': require('babel-plugin-syntax-class-properties'),
  'syntax-decorators': require('babel-plugin-syntax-decorators'),
  'syntax-do-expressions': require('babel-plugin-syntax-do-expressions'),
  'syntax-exponentiation-operator': require('babel-plugin-syntax-exponentiation-operator'),
  'syntax-export-extensions': require('babel-plugin-syntax-export-extensions'),
  'syntax-flow': require('babel-plugin-syntax-flow'),
  'syntax-function-bind': require('babel-plugin-syntax-function-bind'),
  'syntax-function-sent': require('babel-plugin-syntax-function-sent'),
  'syntax-jsx': require('babel-plugin-syntax-jsx'),
  'syntax-object-rest-spread': require('babel-plugin-syntax-object-rest-spread'),
  'syntax-trailing-function-commas': require('babel-plugin-syntax-trailing-function-commas'),
  'transform-async-functions': require('babel-plugin-transform-async-functions'),
  'transform-async-to-generator': require('babel-plugin-transform-async-to-generator'),
  'transform-async-to-module-method': require('babel-plugin-transform-async-to-module-method'),
  'transform-class-constructor-call': require('babel-plugin-transform-class-constructor-call'),
  'transform-class-properties': require('babel-plugin-transform-class-properties'),
  'transform-decorators': require('babel-plugin-transform-decorators'),
  'transform-decorators-legacy': require('babel-plugin-transform-decorators-legacy').default, // <- No clue. Nope.
  'transform-do-expressions': require('babel-plugin-transform-do-expressions'),
  'transform-es2015-arrow-functions': require('babel-plugin-transform-es2015-arrow-functions'),
  'transform-es2015-block-scoped-functions': require('babel-plugin-transform-es2015-block-scoped-functions'),
  'transform-es2015-block-scoping': require('babel-plugin-transform-es2015-block-scoping'),
  'transform-es2015-classes': require('babel-plugin-transform-es2015-classes'),
  'transform-es2015-computed-properties': require('babel-plugin-transform-es2015-computed-properties'),
  'transform-es2015-destructuring': require('babel-plugin-transform-es2015-destructuring'),
  'transform-es2015-duplicate-keys': require('babel-plugin-transform-es2015-duplicate-keys'),
  'transform-es2015-for-of': require('babel-plugin-transform-es2015-for-of'),
  'transform-es2015-function-name': require('babel-plugin-transform-es2015-function-name'),
  'transform-es2015-instanceof': require('babel-plugin-transform-es2015-instanceof'),
  'transform-es2015-literals': require('babel-plugin-transform-es2015-literals'),
  'transform-es2015-modules-amd': require('babel-plugin-transform-es2015-modules-amd'),
  'transform-es2015-modules-commonjs': require('babel-plugin-transform-es2015-modules-commonjs'),
  'transform-es2015-modules-systemjs': require('babel-plugin-transform-es2015-modules-systemjs'),
  'transform-es2015-modules-umd': require('babel-plugin-transform-es2015-modules-umd'),
  'transform-es2015-object-super': require('babel-plugin-transform-es2015-object-super'),
  'transform-es2015-parameters': require('babel-plugin-transform-es2015-parameters'),
  'transform-es2015-shorthand-properties': require('babel-plugin-transform-es2015-shorthand-properties'),
  'transform-es2015-spread': require('babel-plugin-transform-es2015-spread'),
  'transform-es2015-sticky-regex': require('babel-plugin-transform-es2015-sticky-regex'),
  'transform-es2015-template-literals': require('babel-plugin-transform-es2015-template-literals'),
  'transform-es2015-typeof-symbol': require('babel-plugin-transform-es2015-typeof-symbol'),
  'transform-es2015-unicode-regex': require('babel-plugin-transform-es2015-unicode-regex'),
  'transform-es3-member-expression-literals': require('babel-plugin-transform-es3-member-expression-literals'),
  'transform-es3-property-literals': require('babel-plugin-transform-es3-property-literals'),
  'transform-es5-property-mutators': require('babel-plugin-transform-es5-property-mutators'),
  'transform-eval': require('babel-plugin-transform-eval'),
  'transform-exponentiation-operator': require('babel-plugin-transform-exponentiation-operator'),
  'transform-export-extensions': require('babel-plugin-transform-export-extensions'),
  'transform-flow-comments': require('babel-plugin-transform-flow-comments'),
  'transform-flow-strip-types': require('babel-plugin-transform-flow-strip-types'),
  'transform-function-bind': require('babel-plugin-transform-function-bind'),
  'transform-jscript': require('babel-plugin-transform-jscript'),
  'transform-object-assign': require('babel-plugin-transform-object-assign'),
  'transform-object-rest-spread': require('babel-plugin-transform-object-rest-spread'),
  'transform-object-set-prototype-of-to-assign': require('babel-plugin-transform-object-set-prototype-of-to-assign'),
  'transform-proto-to-assign': require('babel-plugin-transform-proto-to-assign'),
  'transform-react-constant-elements': require('babel-plugin-transform-react-constant-elements'),
  'transform-react-display-name': require('babel-plugin-transform-react-display-name'),
  'transform-react-inline-elements': require('babel-plugin-transform-react-inline-elements'),
  'transform-react-jsx': require('babel-plugin-transform-react-jsx'),
  'transform-react-jsx-compat': require('babel-plugin-transform-react-jsx-compat'),
  'transform-react-jsx-self': require('babel-plugin-transform-react-jsx-self'),
  'transform-react-jsx-source': require('babel-plugin-transform-react-jsx-source'),
  'transform-regenerator': require('babel-plugin-transform-regenerator'),
  'transform-runtime': require('babel-plugin-transform-runtime'),
  'transform-strict-mode': require('babel-plugin-transform-strict-mode'),
  'undeclared-variables-check': require('babel-plugin-undeclared-variables-check'),
});

// All the presets we should bundle
registerPresets({
  es2015: require('babel-preset-es2015'),
  es2016: require('babel-preset-es2016'),
  es2017: require('babel-preset-es2017'),
  latest: require('babel-preset-latest'),
  react: require('babel-preset-react'),
  'stage-0': require('babel-preset-stage-0'),
  'stage-1': require('babel-preset-stage-1'),
  'stage-2': require('babel-preset-stage-2'),
  'stage-3': require('babel-preset-stage-3'),

  // ES2015 preset with es2015-modules-commonjs removed
  // Plugin list copied from babel-preset-es2015/index.js
  'es2015-no-commonjs': {
    plugins: [
      require("babel-plugin-transform-es2015-template-literals"),
      require("babel-plugin-transform-es2015-literals"),
      require("babel-plugin-transform-es2015-function-name"),
      require("babel-plugin-transform-es2015-arrow-functions"),
      require("babel-plugin-transform-es2015-block-scoped-functions"),
      require("babel-plugin-transform-es2015-classes"),
      require("babel-plugin-transform-es2015-object-super"),
      require("babel-plugin-transform-es2015-shorthand-properties"),
      require("babel-plugin-transform-es2015-computed-properties"),
      require("babel-plugin-transform-es2015-for-of"),
      require("babel-plugin-transform-es2015-sticky-regex"),
      require("babel-plugin-transform-es2015-unicode-regex"),
      require("babel-plugin-check-es2015-constants"),
      require("babel-plugin-transform-es2015-spread"),
      require("babel-plugin-transform-es2015-parameters"),
      require("babel-plugin-transform-es2015-destructuring"),
      require("babel-plugin-transform-es2015-block-scoping"),
      require("babel-plugin-transform-es2015-typeof-symbol"),
      [require("babel-plugin-transform-regenerator"), { async: false, asyncGenerators: false }],
    ]
  },

  // ES2015 preset with plugins set to loose mode.
  // Based off https://github.com/bkonkle/babel-preset-es2015-loose/blob/master/index.js
  'es2015-loose': {
    plugins: [
      [require("babel-plugin-transform-es2015-template-literals"), { loose: true }],
      require("babel-plugin-transform-es2015-literals"),
      require("babel-plugin-transform-es2015-function-name"),
      require("babel-plugin-transform-es2015-arrow-functions"),
      require("babel-plugin-transform-es2015-block-scoped-functions"),
      [require("babel-plugin-transform-es2015-classes"), { loose: true }],
      require("babel-plugin-transform-es2015-object-super"),
      require("babel-plugin-transform-es2015-shorthand-properties"),
      require("babel-plugin-transform-es2015-duplicate-keys"),
      [require("babel-plugin-transform-es2015-computed-properties"), { loose: true }],
      [require("babel-plugin-transform-es2015-for-of"), { loose: true }],
      require("babel-plugin-transform-es2015-sticky-regex"),
      require("babel-plugin-transform-es2015-unicode-regex"),
      require("babel-plugin-check-es2015-constants"),
      [require("babel-plugin-transform-es2015-spread"), { loose: true }],
      require("babel-plugin-transform-es2015-parameters"),
      [require("babel-plugin-transform-es2015-destructuring"), { loose: true }],
      require("babel-plugin-transform-es2015-block-scoping"),
      require("babel-plugin-transform-es2015-typeof-symbol"),
      [require("babel-plugin-transform-es2015-modules-commonjs"), { loose: true }],
      [require("babel-plugin-transform-regenerator"), { async: false, asyncGenerators: false }],
    ]
  },
});

babel.js（二）：babel-standalone.js加
一、babel.js（一）：babel-standalone.js（单机模式）[https://www.jians...
babel.js（一）：babel-standalone.js（
一、babel-standalone.js是啥？ bable-standalone.js是为非NodeJS环境而生...
react学习（2）
知识点 1：babel.js的作用：ES6=>ES5,jsx=>js2：小案例
babel.js的使用
近期，项目经理的一些需求，打包APP放在电视上，电视的安卓版本不支持大量es6的写法，我也很无奈…………考虑买个杯...
Babel
什么是 Babel Babel又名 babel.js, 是目前前端使用非常广泛的编辑器、转移器。比如当下很多浏览...
一个es6兼容性写法的问题
一个解构语法兼容问题：在360（9.1.0）上的版本里在对象里解构对象，有兼容问题，用babel.js也不好使...
简单的配置babel.js 编译环境
1.项目执行npm init生成package.json文件（npm init后一直回车可以跳过设置步骤，直接使用...
。一一,一,一,一。
一,、
一一
2018年6月22日星期五雨一水一万物一星一宇宙一字一文章一书一世界一读一微笑一赞一知音
一一
杨德昌《一一》，早年曾看过一遍。婷婷短发，白净，蓝色衬衫，学生裙，黑皮鞋，白袜子，学习很好的中学女生。温柔，懂...