简单搭建 ES6 的运行环境

我就是我 2022-03-18 15:59 309阅读 0赞

使用 Webstrom 搭建一个运行环境，通过手动编译的方式实现 ES6 向 ES5 的转码。

若是需要了解 Webstrom 中自己实现 ES6 转码环境的搭建，请参考如下文章：  
[webstrom 配置 es6 的运行环境][webstrom _ es6]

整体目录结构如下：  
![在这里插入图片描述][20190221143127148.]  
node\_modules 目录是存放下载的 library 的，在使用 npm 时会自动添加这个目录

out 是转码后的文件输出目录(先放一个空的)

src 存放 ES6 的代码

下面是一个 ES6 代码的例子：

//readMyFile.js
    const a = { 
        name: "name"
    };
    console.log(`${ a.name}`);
    
    const init = Symbol("init");
    class ReadMyFile { 
        constructor(file) { 
            this.file = file;
        }
    
        //私有方法
        [init]() { 
            console.log("init....");
        }
    
        read() { 
            this[init]();
    
            //read file....
    
        }
    }
    export default ReadMyFile;

直接运行这个代码是会报错的，需要通过 babel 进行转译成 ES5 方可运行。

如下是 package.json 文件的配置：

{ 
      "name": "ES6",
      "version": "0.0.1",
      "scripts": { 
        "compile": "babel src --out-dir out --preset es2015"
      },
      "dependencies": { 
        "babel-cli": "~6.26.0",
        "babel-preset-es2015": "~6.24.1"
      }
    }

右击 package.json 文件中，scripts 节点下的 compile，在弹出的菜单页面选择 Run compile  
![在这里插入图片描述][20190221144339552.]

下面的输出框中会有如下输出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]

若是 exit code 为 0 则表示成功了。

然后就可以在 out 目录下面去查看编译后的 js 文件了 。

//readMyFile.js
    "use strict";
    
    Object.defineProperty(exports, "__esModule", { 
        value: true
    });
    
    var _createClass = function () {  function defineProperties(target, props) {  for (var i = 0; i < props.length; i++) {  var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) {  if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
    
    function _classCallCheck(instance, Constructor) {  if (!(instance instanceof Constructor)) {  throw new TypeError("Cannot call a class as a function"); } }
    
    var a = { 
        name: "name"
    };
    console.log("" + a.name);
    
    var init = Symbol("init");
    
    var ReadMyFile = function () { 
        function ReadMyFile(file) { 
            _classCallCheck(this, ReadMyFile);
    
            this.file = file;
        }
    
        //私有方法
    
    
        _createClass(ReadMyFile, [{ 
            key: init,
            value: function value() { 
                console.log("init....");
            }
        }, { 
            key: "read",
            value: function read() { 
                this[init]();
    
                //read file....
            }
        }]);
    
        return ReadMyFile;
    }();
    
    exports.default = ReadMyFile;

这个文件就可以直接运行了。

右键点击这个文件，选择 Run readMyFile.js

下面的输出区域没有报错就表明成功了。

[webstrom _ es6]: https://blog.csdn.net/hsl0530hsl/article/details/78051878
[20190221143127148.]: /images/20220318/a90633b5e7d54822a65aae6d593395a4.png
[20190221144339552.]: /images/20220318/d465d58532534a2abe683b78cafb1ec1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hzbDA1MzBoc2w_size_16_color_FFFFFF_t_70]: /images/20220318/4c2e670c4f134c068412596855112b10.png