Babel/Core-JS 找不到自己的文件——AWS EB Django

Question

我很难让 ReactJS 及其所有依赖项在 AWS Elastic Beanstalk 环境中正常工作。目前，我正试图让 Babel 工作。它似乎不知道它自己安装在哪里——它在哪个文件夹中。例如，您应该能够使用 "@babel/preset-env" 作为预设名称，但我发现我需要提供完整路径， "/opt/elasticbeanstalk/eb_infra/node_modules/@babel/preset-env"，否则找不到。 （与其他预设/插件类似。）

我已经使用这种方法使大多数东西进入了工作状态，除了 core-js。它似乎在 /tmp/ 中寻找自己的模块。很奇怪，但我能够从那里添加一个符号链接到它的实际位置。但是现在，它找不到core-js/modules/es.string.split。我查看了真正的模块文件夹，果然，该文件不存在。

所以我的问题是，文件es.string.split 是什么（除了显而易见的——String.split 的一些 polyfill），为什么它不寻找例如es6.string.split（也不存在），为什么会丢失等等等等。我该如何让它工作。

我收到的错误消息：

[Application update [...]/Command 02_compress] : Activity execution failed, because: CommandError: An error occurred during rendering [...my_template].html: Error: Cannot find module 'core-js/modules/es.string.split' from '/tmp'
  at /usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
  at process (/usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
  at ondir (/usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
  at load (/usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
  at onex (/usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
  at /usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
  at FSReqWrap.oncomplete (fs.js:153:21)

安装 .ebextensions 文件：

# approach taken from https://github.com/awsdocs/elastic-beanstalk-samples/blob/master/configuration-files/aws-provided/instance-configuration/install-nodejs.config

files:
  "/tmp/prep_node_installation.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #! /bin/bash
      curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -

  "/tmp/install_node.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #! /bin/bash
      yum -y install nodejs

  "/tmp/install_npm.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #! /bin/bash
      curl --silent --location http://npmjs.org/install.sh | sh

  "/tmp/install_babel.sh":
    mode: "000755"
    owner: root
    group: root
    content: |
      #! /bin/bash
      npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
      npm install --save core-js@3 @babel/polyfill
      npm install -g browserify

      # For some reason, core-js seems to be looking in /tmp/ for its files. So place a symbolic link from there to the actual folder that has the files.
      ln -sf /opt/elasticbeanstalk/eb_infra/node_modules/@babel/polyfill/node_modules/core-js /tmp/core-js


commands:
  05_prep_for_node_install:
    command: "sh /tmp/prep_node_installation.sh"
    ignoreErrors: false

  10_install_node:
    command: "sh /tmp/install_node.sh"
    ignoreErrors: false

  20_install_npm:
    command: "sh /tmp/install_npm.sh"
    ignoreErrors: false

  30_install_babel:
    command: "sh /tmp/install_babel.sh"
    ignoreErrors: false

Babel config.js 文件：

const presets = [
  [
    // Because "@babel/preset-env" doesn't work...
    "/opt/elasticbeanstalk/eb_infra/node_modules/@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
        ie: "11",
      },
      useBuiltIns: "usage",
      corejs: 3,
    },
  ],
  [
    "/opt/elasticbeanstalk/eb_infra/node_modules/@babel/preset-react",
    {}
  ],
];

const plugins = [
  "/opt/elasticbeanstalk/eb_infra/node_modules/@babel/plugin-proposal-class-properties",
];

module.exports = { presets, plugins };

我的应用程序已经设置为使用 Django-Compressor，所以这是运行 Babel 以准备压缩的命令，来自 settings.py：

_babel_executable = os.environ.get(
    'BABEL_EXECUTABLE',
    # Full path because it can't find the `babel` executable either
    '/opt/elasticbeanstalk/eb_infra/node_modules/.bin/babel'
)
COMPRESS_PRECOMPILERS = [
    ('text/javascript',
     ('cat {infile} | %s -f {infile} > {outfile}.tmp;' % _babel_executable) +
     'browserify {outfile}.tmp -o {outfile}'),

    ('text/jsx',
     ('cat {infile} | %s -f {infile} > {outfile}.tmp;' % _babel_executable) +
     'browserify {outfile}.tmp -o {outfile}'),
]

Answer 1

npm WARN saveError ENOENT: no such file or directory, open '/opt/elasticbeanstalk/eb_infra/package.json'

从官方 AWS 线程 [1] 看来（这是我的问题）您可能正在压缩顶级目录而不是压缩源本身。

例如，您可能将所有文件都放在一个名为“Project”的文件夹中。与其压缩“Project”，不如压缩并上传“Project”的内容。

[1]https://forums.aws.amazon.com/thread.jspa?messageID=476022

Answer 2

这可能是因为 Browerify 的安装目录不匹配。

执行$ npm install -g browserify会全局搜索安装文件，而不是在AWS设置的npm目录中。