babel的简单使用

什么是babel

随着JavaScript在不断的发展。各种新标准和提案层出不穷，但浏览器的多样性，导致可能几年内都无法广泛普及，babel可以让你提前使用这些语言特性，它是一种用途很多的Javascript编辑器，把最新版的JavaScript编译成当前可执行的版本，通俗点讲就是，利用babel就可以让我们在当前项目中随意的使用这些最新的ES6,ES7语法。

babel安装以及使用

安装

1.新建babel文件夹在根目录下安装babel(安装完后会出现一个node_modules文件夹和package.json文件):

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

2.在根目录下新建babel.config.js文件,并添加以下代码

const presets = [
  ["@babel/env"]    
];

module.exports = { presets };

3.在package.json文件中配置如下命令(将项目下src文件夹下面的script文件打包到build文件夹下)

...
"scripts": {
    "babel-build": "babel src/script -d build/script"
},
...

使用

然后再src/script文件夹下新建index.js和until.js文件随便添加点es6的代码:

src/script/index.js添加如下代码:
import {add} from './until'
console(add(2,3));

src/script/until.js添加如下代码:
export const add = (x,y) => {
    return x+y;
}

运行命令:npm run babel-build,在build/script下,就会看到下面的代码

然后我们再试试编译下react
1.安装@babel/preset-react
npm install --save-dev @babel/preset-react

2.babel.config.js文件里面新增如下代码

const presets = [
    ...
    [
        "@babel/preset-react",
        {
            "pragma": "dom", // default pragma is React.createElement
            "pragmaFrag": "DomFrag", // default is React.Fragment
            "throwIfNamespace": false // defaults to true
        }
    ]
    ...
]

module.exports = { presets};

3.src/script/index.js文件夹下随便加点代码,如下

import React,{Component} from 'react';
import ReactDom from 'react-dom';

class Tests extends Component {
    render(){
        return(
            <div className='box'>{this.props.text}</div>
        )
    }
}

ReactDom.render(
    <Tests text='this is a text'/>,
    document.querySelector('.container')
)

运行命令:npm run babel-build,在build/script下,就会看到编译过后的代码

 

plugins:

const presets = [
    ...
]

const plugins = [
    ["@babel/plugin-transform-object-assign","@babel/plugin-transform-typescript",...]
]

module.exports = { presets,plugins };