如何使用babeljs生成压缩文件和地图文件?

时间:2019-01-08 12:00:04

标签: javascript babeljs source-maps

我正在尝试使用babel生成源地图。我使用yarn作为数据包管理器。使用以下命令从以下文件中获取

yarn bb

我获得了正确的 source.min.js source.min.js.map 。但是我找不到如何将css和原始js文件复制到dist目录。所以我切换到:

yarn bjs

我获得了正确的 source.min.js source.js source.css 。但是result.map始终为null(不是undefined,null)。

我尝试使用sourceMaps“ inline”或“ both”,但是result.map保持为空,并且得到由代码和地图组成的result.code。

如何获取源地图。

package.json:

{
  "name": "MyModule",
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "babel-preset-minify": "^0.5.0",
    "jest": "^23.6.0",
    "jquery": "^3.3.1",
    "jsdoc": "^3.5.5",
    "jsdom": "^13.1.0",
    "minami": "^1.2.3"
  },
  "scripts": {
    "bjs": "node build.js",
    "bb": "babel src/source.js --out-file dist/source.min.js --source-maps",
    "test": "jest",
    "doc": "jsdoc --configure jsdoc.conf.json"
  },
  "babel": {
    "presets": [
      "minify"
    ]
  }  
}

build.js:

const babel = require("@babel/core");
const fs = require('fs');
const path = require('path');

var options = {
    sourceMaps: true,
    presets: ["minify"]
};

babel.transformFile("src/source.js", options, function(err, result) {   
  stToDist(result.code, "source.min.js");
  stToDist(result.map, "source.min.js.map");
  console.log("source.js done!");   
});

copyToDist('src/source.js');
copyToDist('src/source.css');

function copyToDist(file) {
  var dest = "dist/" + path.basename(file);
  fs.copyFile(file, dest, (err) => {
    if (err) throw err;
    console.log(file + " copied to " + dest);
  });
}

function stToDist(st, file) {
  fs.writeFile("dist/" + file, st, function(err) {
    if(err) { return console.log(err);} });   
}

0 个答案:

没有答案