Webpack / typescript 要求有效，但导入无效

Posted 2023-03-13

【中文标题】Webpack / typescript 要求有效，但导入无效

【英文标题】：Webpack / typescript require works but import doesn't

【发布时间】：2016-04-06 10:30:56

【问题描述】：

我正在尝试将 node_module 导入 TypeScript 文件。我正在为我的项目结构使用angular2-webpack-starter 的改编版本。

import ace from 'brace';

在我的一个文件中给了我

找不到模块“大括号”。

但是

var ace = require('brace');

工作正常。根据this issue，我应该没有任何问题。

我的 webpack 配置文件是从 angular2-webpack-starter 复制而来的。 我的 tsconfig.json 如下

  "compilerOptions": 
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  ,
  "files": [
    "src/bootstrap.ts",
    "src/vendor.ts",
    "src/polyfills.ts"
  ],
   "filesGlob": [
      "./src/**/*.ts",
      "!./node_modules/**/*.ts"
   ],
   "compileOnSave": false,
   "buildOnSave": false

为什么一个有效，另一个无效？

【问题讨论】：

您提到的问题似乎与 babel 而不是 tsc 有关。您可以发布导入语句的 js tsc 输出吗？

你试过import * as ace from 'brace'吗？

【参考方案1】：

答案与this issue有关。如果模块没有可用的类型数据（通过.d.ts 文件），ES6 模块语法

import name from "module-name";
import * as name from "module-name";
import  member  from "module-name";
//etc

将不起作用，必须使用 CommonJS 替代方案，

var name = require("module-name");

【讨论】：

从 TypeScript 2.1 版本开始，这不再适用。

@Samir 标准 ES2015 导入/导出语义。 Here are the release notes