Question

我们知道JS eval（）的功能是什么。它只是执行JS的字符串。我有一个项目，其中许多JS代码是大字符串形式，eval执行它。现在我需要编辑一些代码，但我不知道如何将这些长字符串转换为可读代码。

有没有什么方法或工具可以将这些字符串转换为可读的JS代码？

示例JS代码：

    (function(module, exports, __webpack_require__) {

    eval("/* WEBPACK VAR INJECTION */(function(module) {/* REACT HOT LOADER */ if (true) { (function () { var ReactHotAPI = __webpack_require__(269), RootInstanceProvider = __webpack_require__(277), ReactMount = __webpack_require__(279), React = __webpack_require__(331); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function () {\n\n'use strict';\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar _utilsConfig = __webpack_require__(438);\n\nvar _utilsConfig2 = _interopRequireDefault(_utilsConfig);\n\nvar _utilsLogger = __webpack_require__(439);\n\nvar _utilsLogger2 = _interopRequireDefault(_utilsLogger);\n\nvar _utilsGraphsLineGraph = __webpack_require__(703);\n\nvar _utilsGraphsLineGraph2 = _interopRequireDefault(_utilsGraphsLineGraph);\n\nif (true) {\n  _utilsLogger2['default'].Info('Booting up development environment');\n  _utilsConfig2['default'].setEnvironment('development');\n}\n\nvar graphOptions = {\n  chart: {\n    margin: {\n      top: 20,\n      right: 30,\n      bottom: 30,\n      left: 70\n    },\n    width: 620,\n    height: 280,\n    wrapper: '.line-graph',\n    markerRadius: 5,\n    lineDrawingTime: 1000,\n    markerDrawingTime: 250\n  }\n};\n\nvar graphWrappers = document.querySelectorAll(graphOptions.chart.wrapper);\n\nfor (var i = 0; i < graphWrappers.length; i++) {\n  var graphData = JSON.parse(graphWrappers[i].getAttribute('data-graph-data'));\n  graphOptions.chart.period = graphWrappers[i].getAttribute('data-graph-time');\n\n  if (true) {\n    var dayCount = 0;\n    var monthCount = 0;\n    switch (graphOptions.chart.period) {\n      case 'week':\n        monthCount = 1;\n        dayCount = 7;\n        break;\n      case 'month':\n        monthCount = 1;\n        dayCount = 28;\n        break;\n      case 'year':\n        monthCount = 12;\n        dayCount = 28;\n        break;\n      default:\n        _utilsLogger2['default'].Error('Graphing time period does not match!');\n    }\n\n    var useFakeData = false;\n\n    if (useFakeData) {\n      graphData = new Array();\n      for (var _i = 1; _i <= monthCount; _i++) {\n        for (var y = 1; y <= dayCount; y++) {\n          graphData.push(['2016-' + (_i + 1) + '-' + (y + 1), Math.round(Math.random() * 100 / 10) * 10]);\n        }\n      }\n      _utilsLogger2['default'].Info('Using fake graph data: ' + JSON.stringify(graphData));\n    }\n  }\n\n  (0, _utilsGraphsLineGraph2['default'])(graphOptions, graphData);\n}\n\n/* REACT HOT LOADER */ }).call(this); } finally { if (true) { (function () { var foundReactClasses = module.hot.data && module.hot.data.foundReactClasses || false; if (module.exports && module.makeHot) { var makeExportsHot = __webpack_require__(440); if (makeExportsHot(module, __webpack_require__(331))) { foundReactClasses = true; } var shouldAcceptModule = true && foundReactClasses; if (shouldAcceptModule) { module.hot.accept(function (err) { if (err) { console.error(\"Cannot apply hot update to \" + \"FamilyGraph.js\" + \": \" + err.message); } }); } } module.hot.dispose(function (data) { data.makeHot = module.makeHot; data.foundReactClasses = foundReactClasses; }); })(); } }\n/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4)(module)))//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi93ZWJwYWNrL0ZhbWlseUdyYXBoLmpzP2Q4YzkiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O3VDQUFtQixHQUFjOzs7O3VDQUNqQixHQUFjOzs7O2dEQUNKLEdBQXdCOzs7O0FBRWxELElBQUksSUFBTyxFQUFFO0FBQ1gsMkJBQUksSUFBSSxDQUFDLG9DQUFvQyxDQUFDLENBQUM7QUFDL0MsMkJBQU8sY0FBYyxDQUFDLGFBQWEsQ0FBQyxDQUFDO0NBQ3RDOztBQUVELElBQU0sWUFBWSxHQUFHO0FBQ25CLE9BQUssRUFBRTtBQUNMLFVBQU0sRUFBRTtBQUNOLFNBQUcsRUFBRSxFQUFFO0FBQ1AsV0FBSyxFQUFFLEVBQUU7QUFDVCxZQUFNLEVBQUUsRUFBRTtBQUNWLFVBQUksRUFBRSxFQUFFO0tBQ1Q7QUFDRCxTQUFLLEVBQUUsR0FBRztBQUNWLFVBQU0sRUFBRSxHQUFHO0FBQ1gsV0FBTyxFQUFFLGFBQWE7QUFDdEIsZ0JBQVksRUFBRSxDQUFDO0FBQ2YsbUJBQWUsRUFBRSxJQUFJO0FBQ3JCLHFCQUFpQixFQUFFLEdBQUc7R0FDdkI7Q0FDRixDQUFDOztBQUVGLElBQU0sYUFBYSxHQUFHLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDOztBQUU1RSxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsYUFBYSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtBQUM3QyxNQUFJLFNBQVMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDO0FBQzdFLGNBQVksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLGFBQWEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsQ0FBQzs7QUFFN0UsTUFBSSxJQUFPLEVBQUU7QUFDWCxRQUFJLFFBQVEsR0FBRyxDQUFDLENBQUM7QUFDakIsUUFBSSxVQUFVLEdBQUcsQ0FBQyxDQUFDO0FBQ25CLFlBQVEsWUFBWSxDQUFDLEtBQUssQ0FBQyxNQUFNO0FBQy9CLFdBQUssTUFBTTtBQUNULGtCQUFVLEdBQUcsQ0FBQyxDQUFDO0FBQ2YsZ0JBQVEsR0FBRyxDQUFDLENBQUM7QUFDYixjQUFNO0FBQ1IsV0FBSyxPQUFPO0FBQ1Ysa0JBQVUsR0FBRyxDQUFDLENBQUM7QUFDZixnQkFBUSxHQUFHLEVBQUUsQ0FBQztBQUNkLGNBQU07QUFDUixXQUFLLE1BQU07QUFDVCxrQkFBVSxHQUFHLEVBQUUsQ0FBQztBQUNoQixnQkFBUSxHQUFHLEVBQUUsQ0FBQztBQUNkLGNBQU07QUFDUjtBQUNFLGlDQUFJLEtBQUssQ0FBQyxzQ0FBc0MsQ0FBQyxDQUFDO0FBQUEsS0FDckQ7O0FBRUQsUUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDOztBQUUxQixRQUFJLFdBQVcsRUFBRTtBQUNmLGVBQVMsR0FBRyxJQUFJLEtBQUssRUFBRSxDQUFDO0FBQ3hCLFdBQUssSUFBSSxFQUFDLEdBQUcsQ0FBQyxFQUFFLEVBQUMsSUFBSSxVQUFVLEVBQUUsRUFBQyxFQUFFLEVBQUU7QUFDcEMsYUFBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLFFBQVEsRUFBRSxDQUFDLEVBQUUsRUFBRTtBQUNsQyxtQkFBUyxDQUFDLElBQUksQ0FBQyxZQUFTLEVBQUMsR0FBQyxDQUFDLFdBQUksQ0FBQyxHQUFDLENBQUMsR0FBSSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxHQUFHLEdBQUcsRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQztTQUNuRjtPQUNGO0FBQ0QsK0JBQUksSUFBSSw2QkFBMkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsQ0FBRyxDQUFDO0tBQ2pFO0dBQ0Y7O0FBRUQseUNBQWMsWUFBWSxFQUFFLFNBQVMsQ0FBQyxDQUFDIiwiZmlsZSI6IjcwMi5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBjb25maWcgZnJvbSAndXRpbHMvQ29uZmlnJztcbmltcG9ydCBsb2cgZnJvbSAndXRpbHMvTG9nZ2VyJztcbmltcG9ydCBkcmF3TGluZUdyYXBoIGZyb20gJ3V0aWxzL2dyYXBocy9MaW5lR3JhcGgnO1xuXG5pZiAoX19ERVZfXykge1xuICBsb2cuSW5mbygnQm9vdGluZyB1cCBkZXZlbG9wbWVudCBlbnZpcm9ubWVudCcpO1xuICBjb25maWcuc2V0RW52aXJvbm1lbnQoJ2RldmVsb3BtZW50Jyk7XG59XG5cbmNvbnN0IGdyYXBoT3B0aW9ucyA9IHtcbiAgY2hhcnQ6IHtcbiAgICBtYXJnaW46IHtcbiAgICAgIHRvcDogMjAsXG4gICAgICByaWdodDogMzAsXG4gICAgICBib3R0b206IDMwLFxuICAgICAgbGVmdDogNzBcbiAgICB9LFxuICAgIHdpZHRoOiA2MjAsXG4gICAgaGVpZ2h0OiAyODAsXG4gICAgd3JhcHBlcjogJy5saW5lLWdyYXBoJyxcbiAgICBtYXJrZXJSYWRpdXM6IDUsXG4gICAgbGluZURyYXdpbmdUaW1lOiAxMDAwLFxuICAgIG1hcmtlckRyYXdpbmdUaW1lOiAyNTBcbiAgfVxufTtcblxuY29uc3QgZ3JhcGhXcmFwcGVycyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoZ3JhcGhPcHRpb25zLmNoYXJ0LndyYXBwZXIpO1xuXG5mb3IgKHZhciBpID0gMDsgaSA8IGdyYXBoV3JhcHBlcnMubGVuZ3RoOyBpKyspIHtcbiAgbGV0IGdyYXBoRGF0YSA9IEpTT04ucGFyc2UoZ3JhcGhXcmFwcGVyc1tpXS5nZXRBdHRyaWJ1dGUoJ2RhdGEtZ3JhcGgtZGF0YScpKTtcbiAgZ3JhcGhPcHRpb25zLmNoYXJ0LnBlcmlvZCA9IGdyYXBoV3JhcHBlcnNbaV0uZ2V0QXR0cmlidXRlKCdkYXRhLWdyYXBoLXRpbWUnKTtcblxuICBpZiAoX19ERVZfXykge1xuICAgIGxldCBkYXlDb3VudCA9IDA7XG4gICAgbGV0IG1vbnRoQ291bnQgPSAwO1xuICAgIHN3aXRjaCAoZ3JhcGhPcHRpb25zLmNoYXJ0LnBlcmlvZCkge1xuICAgICAgY2FzZSAnd2Vlayc6XG4gICAgICAgIG1vbnRoQ291bnQgPSAxO1xuICAgICAgICBkYXlDb3VudCA9IDc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnbW9udGgnOlxuICAgICAgICBtb250aENvdW50ID0gMTtcbiAgICAgICAgZGF5Q291bnQgPSAyODtcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICd5ZWFyJzpcbiAgICAgICAgbW9udGhDb3VudCA9IDEyO1xuICAgICAgICBkYXlDb3VudCA9IDI4O1xuICAgICAgICBicmVhaztcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIGxvZy5FcnJvcignR3JhcGhpbmcgdGltZSBwZXJpb2QgZG9lcyBub3QgbWF0Y2ghJyk7XG4gICAgfVxuXG4gICAgY29uc3QgdXNlRmFrZURhdGEgPSBmYWxzZTtcblxuICAgIGlmICh1c2VGYWtlRGF0YSkge1xuICAgICAgZ3JhcGhEYXRhID0gbmV3IEFycmF5KCk7XG4gICAgICBmb3IgKGxldCBpID0gMTsgaSA8PSBtb250aENvdW50OyBpKyspIHtcbiAgICAgICAgZm9yIChsZXQgeSA9IDE7IHkgPD0gZGF5Q291bnQ7IHkrKykge1xuICAgICAgICAgIGdyYXBoRGF0YS5wdXNoKFtgMjAxNi0ke2krMX0tJHt5KzF9YCwgTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMTAwIC8gMTApICogMTBdKTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICAgbG9nLkluZm8oYFVzaW5nIGZha2UgZ3JhcGggZGF0YTogJHtKU09OLnN0cmluZ2lmeShncmFwaERhdGEpfWApO1xuICAgIH1cbiAgfVxuXG4gIGRyYXdMaW5lR3JhcGgoZ3JhcGhPcHRpb25zLCBncmFwaERhdGEpO1xufVxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vd2VicGFjay9GYW1pbHlHcmFwaC5qcyJdLCJzb3VyY2VSb290IjoiIn0=");

/***/ })

Answer 1

反转eval = lave

parse +精美印刷版javascript = acorn + recast

橡子比重铸的默认解析器“ Esprima”更快
如果您需要非常低的延迟，则cherow解析器甚至更快

// npm i acorn recast
//import * as acorn from 'acorn' // ast from javascript parser
//import * as recast from 'recast' // ast transformer
const acorn = require('acorn')
const recast = require('recast')

const src1 = 'let x={a:1,b:2,c:3,d:4};console.log(x)'

const ast = recast.parse(src1, {parser: acorn})

const src2 = recast.prettyPrint(ast, { tabWidth: 2 }).code;

console.log(src2)

结果是

let x = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};

console.log(x);

eval（）的对面

1 个答案: