[英]How to module.exports another module?
I have a file we'll call file1.ts
:我有一个文件,我们将调用
file1.ts
:
export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';
I compile this using Webpack and Babel:我使用 Webpack 和 Babel 编译它:
webpack.config.js webpack.config.js
const path = require("path");
module.exports = {
target: "web",
mode: "production",
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "./lib/cjs"),
filename: "index.js",
libraryTarget: "commonjs2",
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: [
"@babel/preset-react",
"@babel/preset-typescript",
[
"@babel/preset-env",
{
targets: ["last 2 versions"],
},
],
],
plugins: ["babel-plugin-styled-components"],
},
},
],
},
};
I publish this to npm.我将此发布到 npm。 Now I want to import it into what we'll call
file2.ts
:现在我想将它导入到我们称之为
file2.ts
:
import { function1 } from 'package';
However, function1 does not exist because if I do, for example import a from 'package';
但是,function1 不存在,因为如果我这样做,例如
import a from 'package';
, a
is undefined
. ,
a
undefined
。
To resolve this, I decided to create another file, we'll call file0.js
to do the following:为了解决这个问题,我决定创建另一个文件,我们将调用
file0.js
来执行以下操作:
module.exports = require('./file1.js');
if I console log the require, it will be a module object with function1
and function2
as i'd expect however, module.exports = require('./file1.js');
如果我控制台记录要求,它将是一个模块 object,如我所料,具有
function1
和function2
但是module.exports = require('./file1.js');
is undefined... so I tried the following which works:未定义...所以我尝试了以下方法:
var test = require('./file1.js');
module.exports = { ...test };
module.exports = require('./file1.js');
module.exports = require('./file1.js');
doesn't. webpack is not designed to support emitting ES modules. webpack 不支持发射 ES 模块。 Its ES module support is for apps that use ES modules internally but emit to a different format.
它的 ES 模块支持适用于在内部使用 ES 模块但发出不同格式的应用程序。 I'd recommend using Rollup instead, which has full native ES module support, but can also support CJS with the same config if you still need it.
我建议使用Rollup ,它具有完整的原生 ES 模块支持,但如果您仍然需要它也可以支持具有相同配置的 CJS。
I think the problem that you're seeing is because your module has no default export.我认为您看到的问题是因为您的模块没有默认导出。
export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';
This code exposes the default export of function1.ts
as function1
and the default export of function2.ts
as function2
, but it does not provide a default export of its own.此代码将
function2
function1.ts
function1
function2.ts
不提供自己的默认导出。
You could try the following instead您可以尝试以下方法
import { default as function1 } from "function1.ts";
import { default as function2 } from "function2.ts";
export default { function1, function2 };
Heres a CodeSandbox showing this in action. Heres 一个CodeSandbox展示了这一点。 (My example mixes ts and js, but it shouldn't make a difference for what you're doing here)
(我的例子混合了 ts 和 js,但它不应该对你在这里做的事情产生影响)
Hope that helps!希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.