关于webpack打包后的导出问题。

发布于 2022-09-13 01:08:38 字数 1629 浏览 26 评论 0

使用webpack打包node项目,使用ts写的。为什么打包出来的js文件没有导出。
webpack配置:

const path = require('path')

function absolutePath(relative) {
  return path.resolve(__dirname, relative)
}

module.exports = {
  mode: 'development',
  entry: absolutePath('./index.ts'),
  output: {
    path: absolutePath('./build'),
    filename: '[name].js',
    publicPath: '/',
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [{ loader: 'ts-loader' }],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx'],
    alias: {
      src: absolutePath('../src'),
      assets: absolutePath('../assets'),
    },
  },
}

./index.ts

export * from './src/utils'
export * from './src/node'
export * from './src/browser'

引用打包后的文件 (./test/_test_/index.js )

const all = require('/Users/zcool/Desktop/TESTSPACE/zgz_utils/build/main')

console.log(all)

截屏2021-08-16 14.57.12.png

为什么没有index.ts里的导出的方法呢?

补充tsconfig.json:

{
  "compilerOptions": {
    "module": "CommonJS", // 指定生成什么模块代码。
    "moduleResolution": "Node",
    "typeRoots": ["./typings", "./node_modules/@types"],
    "target": "ES2015", // 为生成的 JavaScript 设置 JavaScript 语言版本并包含兼容的库声明。
    "lib": ["ES2021", "DOM"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true, // 允许导入export = 模块
    // "esModuleInterop": true
  },
  "include": ["**/*.ts", "**/*.d.ts"],
  "exclude": ["webpack.config.js"]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

感悟人生的甜 2022-09-20 01:08:38

通过webpack.output.library可以解决问题。
webpack文档

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文