zoukankan      html  css  js  c++  java
  • babel的命令行工具babel-cli解析

    babel内置一个cli,可通过命令行操作编译文件

    首先要安装: npm i --save-dev babel-cli 

    babel-cli分为两部分:babel 和 babel-node

    babel命令只会编译文件代码而不会执行代码

    执行需要编译的文件:

    文件script.js:
    let fn = () => {console.log('babel cli')};
    fn();
    
    命令行执行:
    npx babel script.js
    # 输出 var fn = function fn(){console.log('babel cli')}; fn();

    输出编译结果到单个文件:

    npx babel script.js --out-file script-compiled.js

    监测文件的修改同时编译:

    npx babel script.js --watch --out-file script-compiled.js

    编译整个src文件夹目录并将其输出到lib目录:

    npx babel src --out-dir lib

    编译整个src文件夹目录并将其输出到单个文件:

    npx babel src --out-file script-complied.js

    编译src目录的时候忽略test和spec文件:

    npx babel src --out-dir lid --ignore test.js,spec.js

    编译的时候使用plugins和presets:

    npx babel script.js --plugins=transform-runtime
    npx babel script.js --presets=es2015,stage-2

    忽略 .babelrc 的配置:

    npx babel --no-babelrc script.js

    babel-cli提供另一个cli即babel-node,可以直接在命令行执行代码,babel-node与node cli的功能相同,只是会在node执行文件之前先编译es6等代码。

    编译并运行script.js:

    文件script.js:
    let fn = () => {console.log('babel-node')};
    fn();
    
    命令行执行:
    npx babel-node script.js
    # 输出 babel-node

    不建议在生产环境中使用babel-node,因为编译中的缓存数据存储在内存中,造成不必要的内存占用。而整个应用程序需要及时编译,会一直面临应用启动的性能问题。

  • 相关阅读:
    VUE动态组件component以及<keep-alive>
    git flow工作流
    vue组件通讯
    webpack加载器和自动打包工具
    webpack的插件使用,以及引入vue文件的注意事项
    webpack起步以及手动配置config文件
    git 基本操作
    C++中静态成员变量的可以在类内初始化吗?
    python 环境变量设置PYTHONPATH
    vector中resize和reserve的区别
  • 原文地址:https://www.cnblogs.com/zhaozhipeng/p/8267759.html
Copyright © 2011-2022 走看看