如何以编程方式将选项传递给 Babel 转换/插件？答案

【问题标题】：How to programmatically pass options to Babel transforms/plugins?如何以编程方式将选项传递给 Babel 转换/插件？
【发布时间】：2017-02-21 07:52:53
【问题描述】：

我使用的一个工具以编程方式使用 Babel。它只需要很少的插件，一切正常。

我想将选项传递给 Babel 变换。我意识到我还没有这样做，而且看起来我正在尝试的方法不起作用。

具体来说，我想包含babel-transform-strict-mode 并通过strict:false 来禁用全局严格模式。

文档解释了在拥有.babelrc 文件时如何使用它：

// with options
{
  "plugins": [
    ["transform-strict-mode", {
      "strict": true
    }]
  ]
}

在我的代码中：

const babelify = require("babelify")
    , es2015 = require("babel-preset-es2015")
    , reactify = require("babel-preset-react")
    , strictMode = require("babel-plugin-transform-strict-mode")
    ;

...

this.browserify.transform(babelify, {
    global: true,
    babelrc: false,
    presets: [
        reactify
      , es2015
      , [
            strictMode
          , { strict: false }
        ]
    ] 
});

虽然es2015 和reactify 在presets 数组中工作得很好，但将strictMode 与{ strict: false } 相加是行不通的。

错误是：

ReferenceError: [BABEL] /home/.../index.js: Unknown option: foreign.visitor.
Check out http://babeljs.io/docs/usage/options/ for more
information about options.

A common cause of this error is the presence of a
configuration options object without the corresponding
preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration,
please see
http://babeljs.io/docs/plugins/#pluginpresets-options.

如果我使用转换名称 (["transform-strict-mode", { strict: false }]) 而不是 strictMode，它显然找不到模块，因为这是不同模块的一部分。

如何以编程方式（没有babelrc）将选项传递给required 模块（在本例中为strictMode）？

【问题讨论】：

标签： javascript node.js babeljs strict

【解决方案1】：

通常这里推荐的方法是禁用 ES6 模块支持，因为 ES6 模块是自动严格的。例如

this.browserify.transform(babelify, {
  sourceType: 'script',
  presets: [
    reactify,
    [es2015, {modules: false}],
  ],
})

在您的具体情况下，由于您的问题是在 node_modules 中出现问题，这是因为您使用了 global: true。

我假设您专门传递 global: true 是因为您有 node_modules 那个容器 ES6？如果是这样，您应该通过为 babelify 指定 ignore 正则表达式来将编译的内容列入白名单，例如：

// ...
global: true,
ignore: /node_modules\/(?:some_es6_module|some_other_es6_module)/,
// ...

忽略路径中包含node_modules 的任何文件，名为some_es6_module 和some_other_es6_module 的模块除外。这样underscore 之类的东西就不会受到影响。

【讨论】：

啊，这很有趣。那么，这是否意味着我不能再import foo from "foo" 了？我最后使用了this plugin，它可能只是在各处删除了"use strict";。谢谢！
这是一个选项，只要记住你的代码不再符合规范，所以如果你想在它们登陆 Node 后使用 ES6 模块，它会再次遇到这个问题并且没有办法在不使用 CommonJS 的情况下修复它。
我只是在客户端使用一些库（例如underscore）时遇到了一些问题，因为他们正在检查if (this._) {...}，但this 是undefined，因此它失败了。跨度>
啊，我错过了你使用global: true 来编译node_modules。我已经更新了答案。
如果尝试将其复制/粘贴到 .babelrc 中，您需要在键和字符串值周围使用双引号将其格式化为 JSON。我建议更新上面的示例，以避免修改复制/粘贴。

【解决方案2】：

babel-plugin-transform-strict-mode 是插件，不是预设组件，所以必须在 plugins 选项中设置插件。

this.browserify.transform(babelify, {
global: true,
babelrc: false,
presets: [
    reactify
  , es2015
],
plugins:[
  [
        strictMode
      , { strict: false }
    ]
]

});

【讨论】：