手把手教你webpack3(5)babel-loader详细使用说明-阿里云开发者社区

开发者社区> 零零水> 正文

手把手教你webpack3(5)babel-loader详细使用说明

简介:
+关注继续查看

前注:

文档全文请查看 根目录的文档说明

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

5.1、babel-loader

这个用于将使用ES6规范的js代码,转为ES5。

首先安装一大堆东西,参照下面的命令,一共是4个(包括webpack)

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

创建babel规则文件.babelrc,内容设置为:

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ]
}

然后app.js里添加文件内容(这显然是es6语法):

let foo = () => {
    console.log('1')
}
foo()

运行 npm run test 执行脚本,等脚本执行完毕后,查看dist文件夹下的 dist.js 文件。

会发现代码已经被成功转为非es6语法了(截取如下):

var foo = function foo() {
  console.log('1');
};
foo();

但是,这个只能转一些普通的es6语法,像例如PromiseSet之类的,他是无法转换的。

如果想要转换这些,我们需要做一些额外的工作。

首先安装插件

npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev

然后修改.babelrc文件的内容为:

{
  "presets": [
    "babel-preset-env"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

【注】:

babel-runtime(也就是上面plugins数组中的transform-runtime),解决了辅助代码(即让我们可以使用新特性的代码)被默认添加到每一个需要他的文件的问题(这会导致文件过大)。

具体解决方法是禁用了babel对每个文件的runtime注入,引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。

表现效果:假如A模块异步加载B模块,A、B模块里都使用了Set,那么为了使A模块正常运行,引入了某些代码。然后因为B模块又是被A模块引入的,那么B模块在被加载的时候,A模块里已经引入的代码,就没必要再次引入了,所以B模块里是不存在A模块引入的那些兼容代码的。

【注(完)】

修改webpack设置文件的loader内容为:

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
}

最后修改app.js这个文件的内容,给里面加一些特殊的es6语法:

let foo = () => {
    console.log('1')
}
foo()
let bar = new Promise((resolve, reject) => {
    resolve(1)
})
bar.then(msg => console.log(msg))

let baz = new Set([1, 2, 3])
console.log(baz)

let another = async function () {
    console.time('timeout')
    let result = await new Promise((resolve, reject) => {
        console.log('in Promise')
        setTimeout(() => {
            resolve('Promise resolve')
        }, 1000)
    })
    console.log(result)
    console.timeEnd('timeEnd')
}

another()

以上代码包含es6的PromiseSet,以及es7中的async/await

此时我们运行一下npm run test试试,然后查看dist/dist.js文件,会发现我们的代码出现在大约1040行的位置,并且原本使用es6、es7语法的代码,都被一段很长很复杂的代码所替换(因为太长,所以这里略过)。

这说明我们转义成功了!

更多请参照【实战3】解决有es6、es7语法的js代码

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MyBatis Generator(MBG)DB2使用说明 LONG VARCHAR 字段
DB2使用说明LONG VARCHAR 字段默认情况下,MyBatis Generator将LONG VARCHAR字段映射到java.lang.String数据类型,并将这些字段标记为jdbcType =“LONGVARCHAR”。
1330 0
使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeescript或者j...
763 0
Ubuntu中Samba的安装配置和使用[图文]
Samba服务在Ubuntu服务器版本中默认并没有安装。 1. Samba软件包的安装 使用源安装,在终端中输入如下命令:#sudo apt-get install samba#sudo apt-get install smbclient 2.
898 0
MyBatis Generator(MBG)Oracle使用说明 公共同义词 LONG数据类型
Oracle使用说明公共同义词 Public Synonyms如果要为具有公共同义词的表生成对象,则应该实际上根据真实表生成对象,然后在运行时更改表名称。MyBatis Generator自动支持。
920 0
最新版gradle安装使用简介
gradle的最新版本是6.7,从2009年的第一个版本,到2020年的6.7,已经发展了11年了。gradle是作为android的官方构建工具引入的,除了java,它还能够支持多种语言的构建,所以用途非常广泛。
292 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载