webpack中配置Babel

  Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行。

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

一、安装

官方手册传送门

https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

不建议进行全局安装,这样可以保证各个项目独立环境。

npm install --save-dev babel-loader babel-core babel-preset-env

1.安装

全局安装

npm install -g babel
npm install -g babel-cli

局部安装

npm install  --save-dev babel
npm install --save-dev babel-cli

babel6之后 分离为多个包
babel-cli 命令行
babel-core node api 以及 require hook
babel-polyfill 提供es2015的环境

转化为ES5等需要安装插件,根据需要安装

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

二、在webpack.config.js中配置module

2.使用

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
    }
  ]
}

2.1命令行转化js文件:

babel es6.js  --presets es2015

转码结果输出到命令行

三、新建.babelrc配置文件

2.2转码结果写入一个文件

# 转码结果写入一个文件
# --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

  如下是vue-cli自动生成的babel配置。如果要配置plugins,需要npm install对应插件和依赖。

2.3在项目中可以通过修改 package.json 文件

{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.0.0"
  }
}

现在,我们不直接从命令行运行 Babel 了,取而代之我们将把运行命令写在 npm scripts 里,这样可以使用 Babel 的本地版本。
只需将 "scripts" 字段添加到你的 package.json 文件内并且把 babel 命令写成 build 字段。.

{
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

现在可以在终端里运行:

npm run build

这将以与之前同样的方式运行 Babel,但这一次我们使用的是本地副本。

本文由金沙官网线上发布于Web前端,转载请注明出处:webpack中配置Babel

您可能还会对下面的文章感兴趣: