简单转译和 node_module 导入

Question

我有一些源代码是这样组织的：

src/
  App/
    App.index.jsx
    index.css
  index.html
  index.jsx

源代码使用了一些 npm 包（比如 React 和 Lodash）。

目前，我有一个简单的 babel 设置来将我的 jsx 源代码转换为：

dist/
  App/
    App.index.js
    index.css
  index.html
  index.js

这正是我想要的——除了 node_modules 的导入不起作用（它们未被触及，因此显然失败）：

import { jsx as _jsx } from "react/jsx-runtime.js"; // broken
import { render } from 'react-dom'; // broken
import App from './App/App.index.jsx'; // works
render( /*#__PURE__*/_jsx(App, {}), document.getElementById('root'));
//# sourceMappingURL=index.js.map

Babel 文档表明这只是默认行为，但可以被覆盖（但没有具体说明如何覆盖）。我已经尝试了所有可以想到的“包括”、“排除”、“忽略”和“覆盖”的组合，但没有任何区别。我发现与 Babel 相关的所有内容都已过时。

将 Webpack 加入其中似乎有些过分，但如果确实有必要，我可以接受它。但是，我的非捆绑源代码似乎与 Webpack 的设计目的相反。我可以很容易地让 Webpack 编译一个 vendors.js 文件，但不是上面的输出。

我正在寻找一个简单的解决方案，它只允许导入 npm 包。想到的两个选项是：

将所有导入的包捆绑到供应商文件中：

dist/
  App/
    App.index.js
    index.css
  index.js
  index.html
  vendor.js

以某种方式将相关的导入包复制到输出目录，并更新转译源代码的导入：

dist/
  vendor/
    lodash/
      …
    react/
      …
  App/
    App.index.js
    index.css
  index.js
  index.html

import { jsx as _jsx } from "./vendor/react/jsx-runtime.js";
import { render } from './vendor/react-dom.js';
import App from './App/App.index.jsx';
render( /*#__PURE__*/_jsx(App, {}), document.getElementById('root'));
//# sourceMappingURL=index.js.map

我觉得这是一个极其简单的问题，我只能找到过度设计的解决方案。

我当前的（babel 部分）package.json:

{
  "babel": {
    "include": [ // this does nothing
      "./node_modules/**/*",
      "./src/**/*"
    ],
    "plugins": [
      [
        "@babel/plugin-transform-react-jsx",
        { "runtime": "automatic" }
      ]
    ]
  },
}

Answer 1

Snowpack (npm package) 正是我一直在寻找的（除了 css 模块在合并批准的 PR 之前被破坏）。

简单转译和 node_module 导入

Simple transpile & node_module imports

javascript

jsx

ecmascript-6

babeljs