GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → tonyc726 → babel-note

tonyc726 / babel-note

Licence: MIT License
Some examples of babel

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

babelwebpackbabel-loaderbabel-polyfillbabel-runtime

Projects that are alternatives of or similar to babel-note

react-app-rewire-babel-loader
Rewire babel-loader loader in your create-react-app project using react-app-rewired.
Stars: ✭ 20 (+66.67%)
Mutual labels:  babel, babel-loader
react-multi-context
Manage multiple React 16 contexts with a single component.
Stars: ✭ 19 (+58.33%)
Mutual labels:  babel
Babel Plugin Tester
Utilities for testing babel plugins
Stars: ✭ 228 (+1800%)
Mutual labels:  babel
S2s
Coding time Compile. A tool to write code fastest.
Stars: ✭ 254 (+2016.67%)
Mutual labels:  babel
Babel Plugin React Flow Props To Prop Types
Convert Flow React props annotation to PropTypes
Stars: ✭ 236 (+1866.67%)
Mutual labels:  babel
Express Mongoose Es6 Rest Api
💥 A boilerplate application for building RESTful APIs Microservice in Node.js using express and mongoose in ES6 with code coverage and JsonWebToken Authentication
Stars: ✭ 2,811 (+23325%)
Mutual labels:  babel
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+1808.33%)
Mutual labels:  babel
babel-runtime-example
An example of how to use @babel/plugin-transform-runtime
Stars: ✭ 16 (+33.33%)
Mutual labels:  babel
babel-multi-env
`babel` CLI replacement with multiple node version support by babel-preset-env
Stars: ✭ 13 (+8.33%)
Mutual labels:  babel-runtime
Asts Workshop
Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax Trees 🌳 to lint ⚠️ and transform 🔀 your code
Stars: ✭ 253 (+2008.33%)
Mutual labels:  babel
Xwind
Tailwind CSS as a templating language in JS and CSS-in-JS
Stars: ✭ 249 (+1975%)
Mutual labels:  babel
Eslint Import Resolver Babel Module
Custom eslint resolve for babel-plugin-module-resolver
Stars: ✭ 236 (+1866.67%)
Mutual labels:  babel
babel-loader-exclude-node-modules-except
Creating a regular expression for excluding node modules from transpiling except for individual modules
Stars: ✭ 17 (+41.67%)
Mutual labels:  babel-loader
Productivity Frontend
Productivity Application - Kanban Style Productivity Management Application with Customizable Boards, Lists and Cards to Make You More Productive.
Stars: ✭ 234 (+1850%)
Mutual labels:  babel
stan
🔨 Collection of front-end engineering tools
Stars: ✭ 19 (+58.33%)
Mutual labels:  babel
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+1800%)
Mutual labels:  babel
Minimal React Starter
As minimal a react starter as you can get... while also using ES6/Babel and Webpack.
Stars: ✭ 246 (+1950%)
Mutual labels:  babel
Babel Webpack Tree Shaking
Tree-shaking example with Babel and Webpack
Stars: ✭ 254 (+2016.67%)
Mutual labels:  babel
node-lambda-babel-template
A minimal template for an ES2015+ Node.js app running on AWS Lambda (w/ babel and webpack).
Stars: ✭ 40 (+233.33%)
Mutual labels:  babel
babel-plugin-proposal-pattern-matching
the minimal grammar, high performance JavaScript pattern matching implementation
Stars: ✭ 34 (+183.33%)
Mutual labels:  babel
View All Similar Projects ➔

《Babel 笔记》的实验室

由于 Babel 已经升级到v7.*系列，尤其是v7.4后期版本，改动非常大，所以原先实验不在适用 如需要参考v6.*系列，请移步至babel-v6分支

实验目标：

🚨 从 Babel 7.4.0 开始，这个包(@babel/polyfill)已经被弃用，以支持直接包含core-js/stable（以 polyfill ECMAScript 功能）和regenerator-runtime/runtime（需要使用转译的生成器函数）：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

  • 测试使用@babel/preset-env 组合 core-js@3、regenerator-runtime 中不同配置模式下，处理polyfill的方法与结果；

    • 使用useBuiltIns: 'entry';
    • 使用useBuiltIns: 'usage';
    • 使用useBuiltIns: false;

  • 测试使用@babel/runtime 组合 @babel/plugin-transform-runtime模式下，处理依赖注入的方法与结果；

实验结果

以上 4 种模式全部处理平台兼容性问题，不过处理方式不同，结果也有所差异；

模式 webpack 产物大小（未压缩） 备注
使用useBuiltIns: 'entry' 520 KiB 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill; 需要在入口文件手动添加 import 'core-js';import 'regenerator-runtime/runtime';；会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill
使用useBuiltIns: 'usage' 581 KiB 根据配置的浏览器兼容，以及代码中用到的 API 来进行 polyfill，实现了按需添加
使用useBuiltIns: false 581 KiB 此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill
使用@babel/runtime' 104 KiB 按需注入依赖，优势在于提供沙盒环境，同时利用插件，抽离公共辅助函数，大大减小整体内容

综合官方文档，以及上述实验结果，结论如下：

  1. 如果是开发独立依赖包，推荐使用@babel/runtime 组合 @babel/plugin-transform-runtime模式；
  2. 如果是开发应用级项目，推荐使用useBuiltIns: 'usage'模式；

use-preset-useBuiltIns-entry

README

webpack 结果

asset main.js 520 KiB [emitted] [big] (name: main)
orphan modules 706 bytes [orphan] 2 modules
runtime modules 500 bytes 2 modules
modules by path ./node_modules/core-js/modules/*.js 273 KiB 271 modules
modules by path ./node_modules/core-js/internals/*.js 157 KiB 176 modules
./src/index.ts + 2 modules 13.9 KiB [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]

webpack 5.40.0 compiled with 3 warnings in 2460 ms

use-preset-useBuiltIns-usage

README

webpack 结果

When setting `useBuiltIns: 'usage'`, polyfills are automatically imported when needed.
Please remove the direct import of `core-js` or use `useBuiltIns: 'entry'` instead.

asset main.js 581 KiB [emitted] [big] (name: main)
orphan modules 882 bytes [orphan] 2 modules
runtime modules 500 bytes 2 modules
modules by path ./node_modules/core-js/modules/*.js 330 KiB 362 modules
modules by path ./node_modules/core-js/internals/*.js 174 KiB 188 modules
./src/index.ts + 2 modules 1.32 KiB [built] [code generated]
./node_modules/core-js/index.js 40 bytes [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
./node_modules/core-js/features/index.js 15.6 KiB [built] [code generated]

webpack 5.40.0 compiled with 3 warnings in 2439 ms

use-preset-useBuiltIns-false

README

webpack 结果

asset main.js 581 KiB [emitted] [big] (name: main)
orphan modules 706 bytes [orphan] 2 modules
runtime modules 500 bytes 2 modules
modules by path ./node_modules/core-js/modules/*.js 330 KiB 362 modules
modules by path ./node_modules/core-js/internals/*.js 174 KiB 188 modules
./src/index.ts + 2 modules 1.11 KiB [built] [code generated]
./node_modules/core-js/index.js 40 bytes [built] [code generated]
./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
./node_modules/core-js/features/index.js 15.6 KiB [built] [code generated]

webpack 5.40.0 compiled with 3 warnings in 2890 ms

use-babel-plugin-transform-runtime

README

webpack 结果

asset main.js 104 KiB [compared for emit] (name: main)
runtime modules 1.19 KiB 5 modules
orphan modules 1.07 KiB [orphan] 2 modules
modules by path ./node_modules/core-js-pure/internals/*.js 57.9 KiB 93 modules
modules by path ./node_modules/core-js-pure/modules/*.js 29.2 KiB 17 modules
modules by path ./node_modules/core-js-pure/es/ 1.97 KiB 8 modules
modules by path ./node_modules/@babel/runtime-corejs3/core-js/ 316 bytes
  modules by path ./node_modules/@babel/runtime-corejs3/core-js/instance/*.js 193 bytes 3 modules
  ./node_modules/@babel/runtime-corejs3/core-js/json/stringify.js 65 bytes [built] [code generated]
  ./node_modules/@babel/runtime-corejs3/core-js/promise.js 58 bytes [built] [code generated]
modules by path ./node_modules/core-js-pure/features/ 591 bytes
  modules by path ./node_modules/core-js-pure/features/instance/*.js 223 bytes 3 modules
  ./node_modules/core-js-pure/features/json/stringify.js 75 bytes [built] [code generated]
  ./node_modules/core-js-pure/features/promise/index.js 293 bytes [built] [code generated]
./src/index.ts + 2 modules 1.68 KiB [built] [code generated]

webpack 5.40.0 compiled successfully in 1647 ms

参考文献

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].