webpack babel-loader插件-07

        webpack 自带加载 js 模块的功能，但是他只能做 js 模块化的打包，并不能转化 js 里的代码，比如将 ES6 转化成 ES5，那有时候我们的代码还能正常运行，纯靠浏览器来解析，如果浏览器版本比较低的话，运行的时候可能会发生错误，所以，要使用 babel 将代码进行转化

安装： npm install babel-loader @babel/core @babel/preset-env -D

babel-loader：在 webpack里应用babel解析ES6的桥梁

@babel/core：babel 核心模块

@babel/preset-env：babel 预设，一组babel插件的集合

新增 webpack 配置，将 babel-loader 添加到 module 列表中：

module: {rules: [{test: /\.js$/,// 排除编译 node_modules里的js代码exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]
}

在另一个js文件内书写 es6 的代码

function getString() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('hello world!!!')}, 2000)})
}async function helloWorld() {let string = await getString()console.log(string)
}export default helloWorld

此时控制台打印会报错

  regeneratorRuntime 插件

  regeneratorRuntime 是webpack 打包生成的全局辅助函数，有 babel生成，用于兼容 async/await的语法

需要安装 npm install @babel/runtime -D、npm install @babel/plugin-transform-runtime -D

安装好插件，接着添加 webpack文件内的 balel配置

 此时重新打包编译，控制台输出 hello world!!!

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！