zoukankan      html  css  js  c++  java
  • 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

    开发工具
  • 相关阅读:
    angular2 如何使用animate实现动画效果
    angular2+ 组件中用@import进来的css不起作用
    ReentrantLock & AQS
    常用JDK命令
    分布式缓存
    持续交付
    持续部署
    持续集成
    领域驱动设计简介
    spring boot 整合JPA bean注入失败
  • 原文地址:https://www.cnblogs.com/cisbest/p/13748747.html
Copyright © 2011-2022 走看看