返回顶部

[Vue.js] webpack4从0开始构建前端单页项目(6)用babel-loader处理js㈢babel-polyfill

[复制链接]
awagink 显示全部楼层 发表于 2020-11-27 19:39:48 |阅读模式 打印 上一主题 下一主题
webpack4从0开始构建前端单页项目(6)用babel-loader处理js㈢babel-polyfill
babel-loader 只能编译 ES6+以上版本的新增语法,比如箭头函数等,对于 ES6+新增的 API 则没法编译,这时候就可以使用 babel-polyfill 了。babel-polyfill 生成一个全局对象 把 ES6 新增的 API 转换成 ES5。

安装 babel-polyfill
    cnpm i babel-polyfill -S  # 生产依赖 -S表示会把 babel/polyfill  打包进生成的代码中
项目结构
    project
    |   .babelrc            # babel-loader配置文件
    |   .editorconfig       # 配置格式化插件
    |   package.json        # 项目需要的依赖
    |   webpack.config.js   # webpack配置文件
    |
    +---public
    |       index.html      # 用于打包生成 .html 文件的模板
    |
    \---src
            main.js         # webpack的入口文件
依赖的模块(package.json)
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "babel-loader": "^8.1.0",
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    },
    "dependencies": {
        "babel-polyfill": "^6.26.0"
    }
使用babel-polyfill
babel-polyfill可以直接通过入口文件使用
// main.js
    import "babel-polyfill"; // 使用babel-polyfill;
    console.log("入口文件");
在webpack配置文件中使用
//webpack.config.js
    module.exports = {
        entry: ["babel-polyfill", "./main.js"], // 在入口文件中使用babel-polyfill
    }
babel-polyfill参考: https://babel.docschina.org/docs/en/babel-polyfill

开发工具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

纳速健身网成立于2006年8月,是国内优秀健身运动网站,现拥浏览人数超30万。网站是集养生、武术、太极拳和健身气功等多种健身项目于一体的多功能交流平台。平台提供大量优质的教学视频、伴奏音乐(太极拳晨练音乐,广场舞音乐,健身气功音乐)、图文教程、运动科普和经验分享,为健身爱好者提供完善的运动指导平台。
  • 纳速QQ群乙:151815303
  • 纳速QQ群丙:79104490
  • 微信交流群:微信好友搜索【nasuwang】加小纳微信进群交流健身知识,备注【纳速】
  •                     或者扫描页面底部右侧二维码添加小纳微信>>>
  • 微信公众号

  • 微信群客服交流

  • Copyright © 2006-2021, 纳速健身网. | | 辽ICP备13002388号-1 辽公安网备21050202000005号公安网备号 纳速武术-乙 QQ