hexo 静态资源 js 文件添加 es6 语法支持

时间：

分类：

hexo

字数：

160 字

时长：

大约需要 1 分钟

次数：

0 人阅读

习惯 ES6 语法之后，再写 ES5 就有点难受了啊。作为一个小前端，必须要折腾一把，让 hexo 集成 babel ，支持 ES6 语法以及模块化。

好在有 hexo-renderer-babelify插件 支持，其 源码 也很简单，只有 23 行代码(0.0.2版本)。

安装步骤

  1. 安装插件

    1
    $ npm install hexo-renderer-babelify --save

  2. 根目录 _config.yml 添加配置

    1
    2
    3
    4
    5
    6
    7
    # ...
    # hexo-renderer-babelify 插件 es6语法配置
    babelify:
      presets:
        - '@babel/preset-env'
      sourceMaps: true
    # ...

  3. 安装 babel env

    1
    $ npm install @babel/preset-env --save

到这 babel 已经安装完成，在 themes 目录下的 js 文件可以放心使用 es6 的各种语法，包括 import 和 export 。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-01-07/hexo-js-es6/

如果您觉得文章不错，可以请我喝一杯咖啡！

赏