如何使用 babel 创建非缩小和缩小的构建答案

【问题标题】：How to create non-minified and minified builds with babel如何使用 babel 创建非缩小和缩小的构建
【发布时间】：2020-06-28 11:46:43
【问题描述】：

我安装在 babel 模块下面

npm install babel-cli babel-preset-env babel-preset-minify --save-dev

而package.json 有

"scripts": {
  "build": "babel src -d dist --copy-files"
}

当我使用以下.babelrc 配置运行构建时

{
  "presets": [
    "env"
  ],
  "comments": false
}

它将未缩小的构建生成到dist 目录中。

但我也想同时拥有缩小版本和非缩小版本。我尝试在.babelrc 中添加两个预设，如下所示

{
  "presets": [
    "minify", "env"
  ],
  "comments": false
}

但它不会同时生成缩小版和非缩小版。在这种情况下，只会生成缩小版。

有没有办法让 babel 在 dist 目录中创建像 index.js 和 index.min.js 这样的缩小和非缩小版本。

【问题讨论】：

标签： node.js babeljs minify babel-preset-env babel-preset-minify

【解决方案1】：

这是一种方法：

package.json 脚本：

  "scripts": {
    "build:dev": "babel src -d dist --copy-files",
    "build:min": "BABEL_ENV=minify babel src -d dist --out-file-extension .min.js",
    "build": "npm run build:dev && npm run build:min"
  }

.babelrc 配置：

{  
  presets: ['@babel/preset-env'],
  comments: false,
  env: {
    minify: {
      presets: ['@babel/preset-env', ['babel-preset-minify']],
    },
  }
}

然后运行npm run build

【讨论】：