Webpack:导入TypeScript模块“正常”和原始字符串

yk9xbfzb  于 2023-08-06  发布在  Webpack
关注(0)|答案(5)|浏览(127)

使用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

jqjz2hbq

jqjz2hbq1#

如果有人在寻找这个答案的答案。使用import是最好的选择-它将被键入,并允许在输出importrequire时从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"]
    }
}

egdjgwm8

egdjgwm82#

似乎以下是工作:

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'.

e4eetjau

e4eetjau3#

我在这里写了一个完整的解释:https://yonatankra.com/how-to-solve-ts2307-cannot-find-module-when-using-inline-webpack-loaders-with-typescript/
总的来说:
可以使用以下语法导入:第一个月
要使其适用于任何类型的文件,您需要:
1.设置模块声明:raw-loader.d.ts

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

字符串
1.在tsConfig.json中使用它并添加allowSyntheticDefaultImports属性,以允许以这种方式导入没有默认导出的模块:

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


在这篇文章中,我还解释了如果(由于某些非常奇怪的原因)您想使用template.default,如何实现这一点。

h7wcgrx3

h7wcgrx34#

对于您的错误:
raw-loader.d.ts

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

字符串

eqfvzcg8

eqfvzcg85#

对我来说,去掉“!!”来自@Nicolas的回答作品

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

字符串
我没有时间去潜水,但以防万一有人需要它。我使用的是typescript@4.9.5和next@13.4.7

相关问题