-
Babel
2020-02-21 18:40:53Babel是一个广泛使用的转码器,它可以帮你实现以下操作: 它可以帮你将(ES6、ES7...)转换为现浏览器支持的ES5,这样你就不用考虑新标准是否被浏览器识别了。 让你能使用基于JavaScript进行了拓展的语言,比如...Babel是一个广泛使用的转码器,它可以帮你实现以下操作:
- 它可以帮你将(ES6、ES7...)转换为现浏览器支持的ES5,这样你就不用考虑新标准是否被浏览器识别了。
- 让你能使用基于JavaScript进行了拓展的语言,比如React的JSX。
1. 安装
Babel其实是几个模块化的包,其核心功能位于称为
babel-core
的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-env-preset
包和解析JSX的babel-preset-react
包)。npm install --save-dev babel-core npm install --save-dev babel-preset-env npm install --save-dev babel-preset-react
安装的依赖包是不是有点多,需要npm安装好多遍,当然也不是必须要分开安装,你完全可以多个依赖包一起安装,这里要注意的是:“如果多个依赖包一起安装那么每个依赖包之间需要用空格隔开”,如下:
npm install --save-dev babel-core babel-preset-env babel-preset-react
本文以webpack文章的demo为例,如果未阅读上文,并且想了解完整过程请点击回到上文2. 配置
先来看下在
webpack.config.js
文件中配置如下:module.exports = { ... module: { // 这里配置Bobal rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", options: { presets: [ "env", "react" ] } }, exclude: /node_modules/ } ] } }
当然这样配置是完全没错的,但是在正式项目中需要在
webpack.config.js
文件中配置很多项配置,这样就使得这个文件有特别多配置,从而使得这个配置文件会特别复杂,因此为了使这个文件配置变得稍微简单点,一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中,webpack会自动调用.babelrc里的babel配置选项。
接下来我们在来修改配置文件第一步 在项目根目录创建
.babelrc
如下:第二步 在
.babelrc
中配置babel{ "presets": ["react", "env"] }
第三步 修改
webpack.config.js
module.exports = { ... module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", }, exclude: /node_modules/ } ] } }
在配置Babel过程中大家有没有注意到
react
,大家想到了什么,没错就是安装react,我们要先安装react才能用ES6以及JSX语法。npm install --save react react-dom
接下来我们要用ES6语法
第四步 修改
app.js
,让他以组件形式返回
这个时候要注意了,我们之前app.js文件名称的开头字母是小写,这里我们要改为大写,因为react组件名称是需要大写的。import React, {Component} from 'react' import config from './config.json'; class App extends Component{ render(){ return ( <div> {config[0].text} </div> ) } } export default App
修改main.js如下,使用ES6的模块定义和渲染App模块
import React from 'react'; import {render} from 'react-dom'; import App from './App'; render(<App />, document.getElementById('root'));
第五步 重新使用
npm start
打包,并且使用npm run server
启动本地服务,如果之前打开的本地服务器没有关闭,你应该可以在localhost:8080下看到与之前一样的内容,这说明react和es6被正常打包了。 -
babel
2020-05-19 09:21:21babel的安装和使用 在node.js和npm环境下加粗样式 1 .安装babel 1 在目标文件位置打开终端,输入命令:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 2 安装完毕之后,再次输入命令...node.js的模块化–babel的安装和使用
在node.js和npm环境下加粗样式
1 .安装babel
1 在目标文件位置打开终端,输入命令:npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
2 安装完毕之后,再次输入命令安装:npm install --save @babel/polyfill
2.创建babel.config.js
1 在项目目录中创建babel.config.js文件。
编辑js文件中的代码如下:const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] module.exports = { presets } //暴露
3.创建index.js文件
1.index.js文件作为入口文件,与babel.config.js同级
2 在index.js中输入需要执行的js代码(导入导出模块)4 使用npx执行文件
1 打开终端,输入命令:npx babel-node ./index.js
2 可以看到的执行代码5 导入导出
1 设置默认导入/导出
A.默认导出export default { a },如下: let num = 100; //在一个模块中,只允许使用export default向外默认暴露一次成员 export default{ num }
B.默认导入
import 接收名称 from “模块标识符”,如下:import m1 from './m1.js'
2 设置按需导入/导出
A.按需导出
直接导出需要的数据,可多次export let num = 998; export let myName = "jack"; export function fn = function(){ console.log("fn") }
B.按需导入
import { num,fn ,myName } from "./m1.js"
一个模块中既可以按需导入也可以默认导入,一个模块中既可以按需导出也可以默认导出,互不影响
3.直接导入并执行代码
直接import “模块标识符”;
-
Java23种设计模式(总结).doc
-
YD5059-2005 电信设备安装抗震设计规范.pdf
-
python数据分析基础
-
Excel高级图表技巧
-
电商网站设计退换货模块流程图
-
量化高频交易系统tick数据采集
-
使用宏晶科技的IAP系列单片机 开发自己的ISP程序
-
2021-01-19
-
单元测试UnitTest+Pytest【Selenium3】
-
H310主板装GT710显卡
-
(新)备战2021软考网络工程师分类强化培训套餐
-
JAVA面向对象-------------接口
-
【数据分析实战训练营】Hive详解
-
rider jar包
-
基于SRS构建直播平台
-
jdk-8u221-linux-x64.rpm
-
07.变量声明须一致
-
【数据分析-随到随学】Mysql数据库
-
Intellij IDEA 超实用小技巧「含插件主题分享」
-
限量!阿里Spring Boot成长笔记终开源!全网仅一份,手慢无!