zoukankan      html  css  js  c++  java
  • 让nodejs 支持 es6 import

    备注:

       尽管nodejs 新版本已经支持es6 的好多特性了,但是还是有部分不支持,为了使用,实际上我们有一个
    比较强大工具 bable,下面介绍几个比较简单的用法。
    1. bable-cli 中的 babel-node
    a. 初始化项目
    yarn init -y
    
    b. 安装依赖 babel-cli 
     备注:可以去全局,可以项目安装,演示使用的项目
     yarn add babel-cli babel-preset-env babel-core
    c. 项目结构如下:
    
    ├── main.js
    ├── package.json
    ├── README.md
    ├── run.js
    ├── user.js
    └── yarn.lock
    main.js
    
    import  user from "./user";
    let foo = (item) =>console.log(JSON.stringify(item));
    foo(user.userinfo);
    foo(user.moduleinfo);
    
    package.json
    
    {
      "name": "nodejses6",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-register": "^6.26.0"
      },
      "scripts": {
        "run": "node run",
        "cli":"babel-node main.js"
      }
    }
    
    run.js
    
    require("babel-register");
    require("./main")
    
    user.js
    
    export default {
      userinfo:{
        "name":"dalong",
        "age":33
      },
      moduleinfo:{
        version:"v1",
        scope:"all"
      }
    }
    
    d. babel 配置
    .babelrc
    
    {
        "presets": [
            [
                "env",
                {
                    "targets": {
                        "node": "current"
                    }
                }
            ]
        ]
    }
    
    e. 运行
    
    yarn run cli 
    2. 使用babel-register
    代码参考上面的,主要是 run.js 代码,以及 npm 包babel-register,
    执行 yarn run run 即可
    3. 参考资料
    https://github.com/rongfengliang/nodejses6demo
    https://www.npmjs.com/package/babel-register
    https://www.npmjs.com/package/babel-cli
  • 相关阅读:
    【剑指Offer面试编程题】题目1504:把数组排成最小的数--九度OJ
    【剑指Offer面试编程题】题目1373:整数中1出现的次数--九度OJ
    【剑指Offer面试编程题】题目1372:最大子向量和--九度OJ
    【剑指Offer面试编程题】题目1371:最小的K个数--九度OJ
    vue路由传参
    Es5.Es6区别
    面向对象和面向过程
    vuex
    Vue脚手架使用
    vue中fetch请求
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/8213879.html
Copyright © 2011-2022 走看看