最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • babel ---七日打卡

    正文概述 掘金(paodan)   2021-01-11   505

    前言:

    @babel是私有包的表示方法,@后面接的是一个作用区域scope,也可以是这个包的归属者。

    babel是什么?

    Babel 是一个 JavaScript 编译器。
    Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
    babel的功能主要体现在以下几个方面:
    1.语法转换
    2.通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
    3.源码转换 (codemods)

    一、@babel/polyfill

    使用场景

    在日常工作中,我们用vue-cli搭建了一个项目在完成开发、发布、上线之后,就很容易遇到问题,比如在chorme浏览器中可以正常运行,但是在百度浏览器上运行的时候会发现控制台报这种错误:“vuex requires a Promise polyfill in this browser”,通过分析可知这段报错告诉我们,一些低版本的浏览器对es6新语法并不支持,这时应该怎么办呢?经过一番百度我们知道通过安装@babel/polyfill可以解决这个问题。

    原理解释

    由于 Babel 只转换语法(如箭头函数), 所以需要使用 @babel/polyfill来支持新的全局变量,例如Promise 、新的原生方法如 String.padStart (left-pad) 等。 解决低版本的浏览器对es6新语法不支持的问题。

    安装:

    npm install --save-dev babel-polyfill
    

    引用方式有三种:
    1.为了引入@babel/polyfill。你需要在你应用的entry point的头部引入它 确保它在其他代码或者引用前被调用,CMD的引入方式写法如下:

    require("@babel/polyfill")
    

    2.如果是es6 的import 语法,要在入口点(如:main.js)的顶部引入polyfill,确保首先加载polyfill。

    import "@babel/polyfill";
    

    3.在webpack中集成polyfill
    如果在.babelrc 中没有指定 useBuiltIns 的值或者设置useBuiltIns: false. 可以直接在webpack.config.js 的 entry array 中添加@babel/polyfill

    module.exports = {
      entry: ["@babel/polyfill", "./app/js"]
    };
    

    二、 在webpack中使用babel-loader

    功能:

    利用babel-loader等包实现es6转es5语法

    安装

    npm install babel-loader @babel/core @babel/preset-env webpack -D
    
    {
        test:/\.js$/,
        loader: babel-loader?cacheDirectory=true
        exclude:/node_modules/
    }
    

    @babel/core的功能是对某些需要调用Babel的API进行转码
    上面代码的意思是:遇到js文件先用babel-loader处理,cacheDirectory=true表示loader 将使用默认的缓存目录 node_modules/.cache/babel-loader,如果在任何根目录下都没有找到 node_modules 目录,将会降级回退到操作系统默认的临时文件目录,exclude表示排除node_module中的文件确保转译尽可能少的文件。
    可是这样还不能发挥babel的作用,在项目的根目录下创建.babelrc文件,配置如下:

    {
    "preset":["@babel/preset-env"]
    }
    

    另外一种写法,使用options属性来给loader传递选项::

      {
        test: /\.js$/,
        include:/node_modules/librasons,// path.resolve(__dirname, 'node_modules/librasons'),
        use: {
          loader:"babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    

    参考
    最近折腾 @babel/preset-env 的一些小心得


    起源地下载网 » babel ---七日打卡

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元