BabelJS - 使用 Babel 7 设置项目

BabelJS - 使用 Babel 7 设置项目

最新版本的 Babel,7 发布,对现有包进行了更改。安装部分与 Babel 6 相同。abel 7 唯一的区别是所有的包都需要用@babel/ 安装,例如@babel/core、@babel/preset-env、@babel/cli、@babel/polyfill 等。

这是使用 babel 7 创建的项目设置。

1、执行以下命令开始项目设置

npm init

2、安装以下软件包

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

3、现在将在根文件夹中创建一个 .babelrc 文件

{
    "presets": [
        "@babel/env",
        "@babel/typescript"
    ]
}

4、package.json如下:

{
  "name": "babel7project",
  "version": "1.0.0",
  "description": "babel7 babel ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel7": "npx babel src/main.js --out-file script/main_es5.js",
    "babelts": "npx babel src/index.ts --out-file script/index.bundle.js"
  },
  "keywords": [
    "babel",
    "babel7",
    "js"
  ],
  "author": "hk",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-typescript": "^7.18.6"
  }
}

新建代码main.js

let add = (a,b) => {
    return a+b;
}
var k = add(3,6);
console.log(k);

运行脚本:

npm run babel7

转译后的代码如下:

var add = function add(a, b) {
  return a + b;
};

var k = add(3, 6);
console.log(k);

好了,基本的babel7的使用流程就是如上所示。

我们再来看看Babel处理typescropt

Babel 7 的工作方式与 Babel 6 相同。唯一的区别是使用 @babel 安装 pacakge。 在 babel 7 中有一些预设已弃用。

我们将看到另一个使用 typescript 的示例,并使用 typescript preset 和 babel 7 将其转换为 Es2015 JavaScript。

要使用 typescript,我们需要安装 typescript 包,如下所示

npm install --save-dev @babel/preset-typescript

在 src/ 文件夹中创建 test.ts 文件并以 typescript 形式编写代码

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

运行脚本:

npm run babelts

生成的代码如下:

"use strict";

var getName = function getName(person) {
  return "Hello, " + person;
};

getName("Siya");

简单吧,以上就是babel7处理ts的基本使用。欢迎讨论。

 

版权声明:著作权归作者所有。

相关推荐

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

Linux:使用visudo设置用户sudo权限

visudo我们可以修改/etc/sudoers文件来设置用户的sudo权限,修改/etc/sudoers一定要使用visudo命令,它可以让我们比较安全的修改此文件。visudo有以下特性:锁定文件避免多个同时编辑检查语法的完整性检查解析错误,以避免用户错误输入使用root的权限直接执行visudo,打开suders文件$visudo 注意:这里不需要输入shduers文件的路径,默认为/etc

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

Nginx同一个域名配置多个项目

使用Nginx要在同一个域名下配置多个项目有两种方式:nginx按不同的目录分发给不同的项目启用二级域名,不同的项目分配不同的二级域名nginx按不同的目录分发给不同的项目在nginx的server节点配置server {     listen    80;     server_name example.c

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

查看项目使用Swift的版本

使用xcode创建swift项目,你需要知道在项目中正在使用的swift版本。使用终端查看:swift -version 比较稳妥的方法是在xcode上查看,因为每个项目可能设定的swift 版本不一样。按路径打开:Project -> 选择项目的target -> Build Settings ->

Tensorflow 设置CUDA_VISIBLE_DEVICES来控制GPU的使用

如果服务器有多个GPU,tensorflow默认会全部使用。如果只想使用部分GPU,可以通过参数CUDA_VISIBLE_DEVICES来设置GPU的可见性。示例:Environment Variable Syntax ResultsCUDA_VISIBLE_DEVICES=1 Only device 1 will be seenCUDA_VISIBLE_DEVICE

Maven设置项目JDK版本为1.8

导入一个项目到iDEAL,项目中使用到lambda表达式的地方都报错,提示jdk版本不对。想到的第一种解决方案就是修改iDEAL的配置,修改两处的设置,如下:File → Settings → Java Compiler → Target bytecode version 改为1.8File → Project Structure → Modules → Language level 改为 8-L

Centos 7配置docker.service

由于centos7使用了新的服务管理工具 systemctl 来代替 service,所以配置文件好像都放在了 /lib/systemd/system/ 中以 .service 结尾。修改配置文件打开 /lib/systemd/system/docker.service ,在 [Service] 下添加 EnvironmentFile=/etc/sysconfig/docker[Unit]Desc