Question

我需要使用webpack从typescript导入原始数据。这是我的设置：

$ tree
.
+-- file.txt
+-- main.ts
+-- package.json
+-- tsconfig.json
+-- webpack.config.js

file.txt的

file-content

main.js

import file from './file.txt';

console.log(file);

的package.json

{
  "devDependencies": {
    "raw-loader": "^0.5.1",
    "ts-loader": "^3.1.1",
    "typescript": "^2.6.1",
    "webpack": "^3.8.1"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "app"
  },
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js

const path = require('path');

const config = {
  entry: './main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
      { test: /\.tsx?$/, loader: 'ts-loader' },
    ]
  }
};

module.exports = config;

当我运行weback时，它说它无法找到模块：

ERROR in ./main.ts
[tsl] ERROR in /tmp/test/main.ts(1,18)
      TS2307: Cannot find module './file.txt'.

我的问题是：如何将txt数据导入打字稿文件？例如，在编写角度组件并导入html模板以将其分配给该组件的模板属性时，这非常有用。

Answer 1

所以我终于开始工作了。我在.d.ts文件中添加了模块声明：

declare module '*.txt' {
  const content: any;
  export default content;
}

然后才导入.txt这样的文件：

const someTextContent = require('./some.txt');

您可以找到有关此here的更多信息。

编辑：

如果您想使用import关键字，请按以下方式使用：

import * as someTextContent from './some.txt';

Answer 2

我在src根目录中添加了全局定义文件global.d.ts并添加：

declare module "*.txt" {
  const content: any;
  export default content;
}

我不需要任何额外的tsconfig.json，而我只拥有raw-loader的标准webpack规则：

rules: [
   {
      test: /\.txt$/i,
      loader: 'raw-loader',
   },

然后我可以将名为./source.js.txt的纯文本文件导入ts变量，如下所示：

import txt from './source.js.txt'

似乎让TS开心比Webpack更重要。关键似乎是模块定义。全局或每个文件（如果需要）。

使用`import`语句

2 个答案: