babel | 易学教程

「吐血整理」再来一打Webpack面试题🔥(持续更新)

阅读更多关于「吐血整理」再来一打Webpack面试题🔥(持续更新)

3 月，跳不动了？>>> 「观感度：🌟🌟🌟🌟🌟 」「口味：清蒸鲈鱼」「烹饪时间：15min 」本文已收录在 Github github.com/Geekhyt ，欢迎Star。从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做足了准备，很有信心征服面试官。不出我所料，面试官被我引入了我擅长的领域。 ❝ 看来你对Webpack很熟悉，那我来考考你 ❞ 0.有哪些常见的Loader？你用过哪些Loader？ (我开始熟悉的报起了菜名) raw-loader ：加载文件原始内容（utf-8） file-loader ：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) url-loader ：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值时返回其 publicPath，小于阈值时返回文件 base64 形式编码 (处理图片和字体) source-map-loader ：加载额外的 Source Map 文件，以方便断点调试 svg-inline-loader ：将压缩后的 SVG 内容注入代码中 image-loader ：加载并且压缩图片文件 json

ant design 在react中的按需加载

阅读更多关于 ant design 在react中的按需加载

先看官网介绍： https://ant.design/docs/react/introduce-cn 根据说明新建文件.babelrc (babel的配置文件) 运行项目，看是否成功。如果报错有多个babel配置文件,可以查看package.json文件中是否有package.json文件中是否babel配置可复制这里： "plugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ] 删除掉.babelrc 文件即可了。来源： https://www.cnblogs.com/taohuaya/p/12531731.html

【华为云技术分享】大前端的自动化工厂— babel

阅读更多关于【华为云技术分享】大前端的自动化工厂— babel

一. 关于babel babel是ES6+语法的编译器，用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法，使代码能够适用更多环境。最初的babel使用起来是非常方便的，几乎仅使用少量的配置就可以使用，但随着工具的快速升级和代码架构的转变，babel已经裂变成非常多的部分，每个部分各司其职，这样做的好处是可以缩小生产环境的正式包的代码体积（因为可以按需引用）而加重了开发环境（开发阶段需要引入更多碎片化的插件），但劣势就是将其使用门槛提得非常高，对软件架构不熟悉的开发者难以使用。比如babel官方网站在webpack配置的章节，提及了babe-loader,babel-core和babel-preset-env三个插件，而当开发者在webpack中实际进行配置时除了上述三个基本插件外，又会遇到babel-polyfill,babel-runtime,babel-plugin-transform-runtime等等一系列插件，或许通过查看插件说明能够理解插件的功能，但开发者却很难判断自己是否该使用这个功能或者什么时候使用。二. 基本需求推演我们从工具设计的角度，通过问题推演的方式来看看 babel 的变化。在 ES6 标准推出时，浏览器还不能很好地支持，但 ES6 的许多特性和语法又很诱人，所以大家想了个办法，那就是用 ES6 编写代码，然后出包的时候拿个工具转换一下

rollup+babel+typescript+react配置

阅读更多关于 rollup+babel+typescript+react配置

某厂面试归来，发现自己落伍了！>>> import babel from "rollup-plugin-babel"; import alias from "@rollup/plugin-alias"; import path from "path"; export default { input: './src/index.tsx', output: { file: './dist/modern.js', format: 'iife' }, plugins: [ alias({ entries: []//略，根据自己情况来定 }), babel({ "babelrc": false, "presets": [ "@babel/preset-react", [ "@babel/preset-typescript",{ "isTSX":true,//关键配置 "allExtensions": true//关键配置 } ], [ "@babel/env", { "modules": false, "useBuiltIns": "usage",//这里使用babel的自动生成polyfill依赖的功能 "corejs": { "version": 3, // 使用core-js@3 "proposals": true, }, "loose": true } ] ], "include":

es6-compact-table 名词备忘

阅读更多关于 es6-compact-table 名词备忘

网址：http://kangax.github.io/compat-table/es6 网站收录了各编译器对es6及其后版本的支持度，其中我对以下几个并不了解所为何物 Traceur Babel 6 + core-js Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2018.11 Type-Script + core-js 2 Type-Script + core-js 3 es6-shim Konq 4.14 Echo JS XS6 JXA Node >=6.5 <7 Node >=8.10 <9 Node >=10.13 <11 DUK 1.8 DUK 2.2 JJS 1.8 JJS 10 GraalVM 1.0 Traceur Traceur 是一个来自 Google 的 Javascript 编译器，通过它可以体验一些很新并且有趣的 Javascript 语言特性，这些多数是还没有被当前浏览器实现的 ECMAScript 标准或草案，比如：数组比较、类、模块、迭代器、方法参数默认值、Promise等。介绍说明 Traceur 和 Babel 对比：与 Babel 功能基本相同，都提供了把新的 js 语言特性转化功能，依照文章开头的网站显示，Traceur 比较老牌，所支持的新特性要少一些。 code-js 开源库

ES6的开发环境搭建

阅读更多关于 ES6的开发环境搭建

除了Webpack自动编译，我们还可以使用Babel把ES6编译成ES5 建立工程目录：先建立一个项目的工程目录，并在目录下边建立两个文件夹：src和dist src:书写es6代码的文件夹，写的js程序都放在这里 dist：利用Babel编译成es5代码的文件夹，在html页面需要引入的是这里的js文件。编写index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>hello script</title>  <script src="./dist/index.js"></script> </head> <body> hello </body> </html> 在src下新建index.js文件。 let a = 1; console.log(a); 生成package.json文件，npm init -y (其中-y可以不用我们自己一直敲回车输入信息，均采用默认值)，这样就初始完了。

babel es6 转 es5

阅读更多关于 babel es6 转 es5

1.创建package.json 　　npm init -y 2.安装所需要的包　　npm install -D @babel/core @babel/cli @babel/preset-env 3.在根目录下创建文件 .babelrc 　　文件内容　　　　{ 　　　　　　"presets":["@babel/preset-env"] 　　　　} 4.创建src目录创建js文件 5.运行命令将 src下的js文件编译转码到如：lib目录　　运行：.\node_modules\.lib\babel src --out-dir lib 　　npm@5.2.0 可用 npx babel 　　运行：npx babel src --out-dir lib 来源： https://www.cnblogs.com/webuserlast/p/10960794.html

几个命令行命令的总结(node, babel-cli, babel-node)

阅读更多关于几个命令行命令的总结(node, babel-cli, babel-node)

node: 输入node, 进入repl环境之后，可以直接运行javascsript表达式，模拟node输出 sh-it-nb0023:static xialei$ node > console.log('lallalala'); lallalala undefined babel-cli: 安装好babel-cli后，可以直接通过babel命令来转码，前提是根目录一定要有.babelrc # 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s babel-node： babel-cli 工具自带一个 babel-node 命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。它不用单独安装，而是随 babel-cli

webpack4 Cannot find module '@babel/core'

阅读更多关于 webpack4 Cannot find module '@babel/core'

Error: // webpack Cannot find module '@babel/core' 解决办法一：原因"babel-loader": "^8.0.0" 版本问题。使用"babel-loader": "^7.1.5"即可解决该错误。 package.json { "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5" } } 解决办法二：安装@babel/core依赖 https://www.npmjs.com/package/@babel/core npm install --save-dev @babel/core 在尝试第二种方法之后又报错:TypeError: Cannot read property 'bindings' of null 所以推荐用第一种方法来源： https://www.cnblogs.com/liuguiqian/p/11273962.html

webpack4 Cannot find module '@babel/core'

阅读更多关于 webpack4 Cannot find module '@babel/core'

Error: // webpack Cannot find module '@babel/core' 解决办法一：原因"babel-loader": "^8.0.0" 版本问题。使用"babel-loader": "^7.1.5"即可解决该错误。 package.json { "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5" } } 解决办法二：安装@babel/core依赖 https://www.npmjs.com/package/@babel/core npm install --save-dev @babel/core 参考： https://blog.csdn.net/zSY_snake/article/details/88036785 https://www.cnblogs.com/jiebba/p/9618930.html 来源： https://www.cnblogs.com/laneyfu/p/11262874.html

订阅 babel