深入babel（实战）

Spark

前言：此文章只是个人理解，如有错误希望留言指出

上一篇已经讲了babel的作用和基本配置，那怎么才能应用到自己的项目中呢？这篇文章就以webpack为例，搭建一个简单的webpack应用（前提你你要先安装node环境，这里就不说了，这不是这篇文章的重点，请自行百度）

  • 首先创建一个空的文件夹example-babel，用终端进入此目录中运行

npm init #这行命令初始化此文件夹，一路回车就ok

  • 接着安装babel工具

npm i babel-cli -D

  • 安装preset插件

npm i babel-preset-env

  • 安装runtime插件，需要的地方将自动转换

npm i babel-plugin-transform-runtime babel-runtime -D

  • 编写.babelrc文件，配置插件选项
{
    "presets": [
        [
            "babel-preset-env",
            {
                "targets": {
                    "browsers": ["ie >= 8", "chrome >= 62"]
                }
            }
        ]
    ],
    "plugins": [
        "transform-runtime"
    ]
}

热更新安装一下，方便编写代码保存的同时能够运行运行代码，我这里用nodemon来运行，

npm i nodemon -D

不熟悉这个插件的可以先去读一下文档

在根目录中新建一个src文件夹，运行的js文件都将放在这里

咱们在。package.json添加两行代码,找到scripts添加以下两行代码

"scripts": {
    "dev": "nodemon -w src -x \"babel-node src/test.js\"",
    "build": "babel src -s -d dist" 
}

这时候在test.js写一些es6的语法，就能将es6转成es5了，验证一下运行

npm run build

看一下dist目录下是不是也有一个test.js跟一个sourcemap文件，打开test.js是不是已经编译成功了？

如果本文有错误之处，欢迎留言指出~