Webpack：“通常”和作为原始字符串导入 TypeScript 模块

Posted 2023-03-13

【中文标题】Webpack：“通常”和作为原始字符串导入 TypeScript 模块

【英文标题】：Webpack: import TypeScript module both "normally" and as raw string

【发布时间】：2017-07-26 16:16:37

【问题描述】：

使用 webpack ^v2.2.1，除了“正常”导入相同的模块之外，我还想将 TypeScript 模块作为文本导入。

我想我可能应该使用raw-loader。但这行不通。

一些示例代码：

import DemoComponent from './demo'
import demoCode from 'raw-loader!./demo'

TypeScript 对我大喊大叫

error TS2307: Cannot find module 'raw-loader!./demo'.

我正在使用ts-loader。

这是我的webpack.config.js：

const  resolve  = require('path')
const fail = require('webpack-fail-plugin')

const config = 
  entry: './docs/index.ts',
  output: 
    filename: 'bundle.js',
    path: resolve(__dirname, 'docs-build')
  ,
  resolve: 
    extensions: [ '.ts', '.js' ]
  ,
  devtool: 'inline-source-map',
  module: 
    rules: [
      
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      ,
      
        test: /\.ts$/,
        loader: 'ts-loader'
      ,
      
        test: /\.scss$/,
        use: [
          'style-loader',
          
            loader: 'css-loader',
            options: 
              sourceMap: true
            
          ,
          'sass-loader'
        ]
      
    ]
  ,
  plugins: [
    fail
  ]


module.exports = config

【问题讨论】：

相关***.com/questions/33915930/…

【参考方案1】：

似乎以下工作正常：

import DemoComponent from './demo'
const demoCode = require('!!raw-loader!./demo')

但我不确定这是否正确。我很想找到一些关于加载程序的顺序和机制的文档。

另外，我更愿意使用import 语句来保持一致。但是如果我进行直接转换，TypeScript 就会抱怨它：

import DemoComponent from './demo'
import demoCode from '!!raw-loader!./demo'

错误很简单

error TS2307: Cannot find module '!!raw-loader!./demo'.

【讨论】：

我碰巧享受了 require 运行时特性的好处，在这种情况下，我会坚持下去。

【参考方案2】：

如果有人正在寻找这个答案的解决方案。使用import 是最好的选择 - 输出import 与require 时，它将被输入并允许来自Rollup 和Webpack 3+ 等模块捆绑器的优化：

您需要创建一个raw-loader.d.ts 并确保它包含在您的tsconfig.json 文件中。输入以下内容：

declare module '!!raw-loader!*' 
  const contents: string
  export = contents

tsconfig.json:

    "compilerOptions": 
        "types": ["raw-loader.d.ts", "node"]
    

【讨论】：

即使该文件存在于同一文件夹中，如果我们得到“无法找到 raw-loader.d.ts 的类型定义文件”，这意味着什么？

【参考方案3】：

对于您的错误：

raw-loader.d.ts:

declare module '!!raw-loader!*' 
  const contents: string
  export default contents

【参考方案4】：

我在这里写了一个完整的解释： https://yonatankra.com/how-to-solve-ts2307-cannot-find-module-when-using-inline-webpack-loaders-with-typescript/

总结：

您可以使用以下语法导入：import template from 'raw-loader!./component.template.html';

要使此功能适用于您需要的任何类型的文件：

设置模块声明： raw-loader.d.ts

declare module '!!raw-loader!*' 
  const contents: string
  export default contents

在您的tsConfig.json 中使用它并添加allowSyntheticDefaultImports 属性以允许以这种方式导入没有默认导出的模块：

  "compilerOptions": 
    "types": ["raw-loader.d.ts", "node"],
    "allowSyntheticDefaultImports": true

在文章中，我还解释了如果（出于某种真正奇怪的原因）您想使用 template.default 时如何进行这项工作。