使用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
型
5条答案
按热度按时间jqjz2hbq1#
如果有人在寻找这个答案的答案。使用
import
是最好的选择-它将被键入,并允许在输出import
与require
时从Rollup和Webpack 3+等模块捆绑包进行优化:您需要创建一个
raw-loader.d.ts
,并确保它包含在您的tsconfig.json
文件中。输入以下内容:字符串
tsconfig.json
:型
egdjgwm82#
似乎以下是工作:
字符串
但我不确定这有多正确。我很想找到一些关于装载机的顺序和机制的文档。
另外,我更喜欢使用
import
语句来保持一致性。但是如果我直接转换,TypeScript会抱怨它:型
错误是一个简单的
型
e4eetjau3#
我在这里写了一个完整的解释:https://yonatankra.com/how-to-solve-ts2307-cannot-find-module-when-using-inline-webpack-loaders-with-typescript/
总的来说:
可以使用以下语法导入:第一个月
要使其适用于任何类型的文件,您需要:
1.设置模块声明:
raw-loader.d.ts
个字符串
1.在
tsConfig.json
中使用它并添加allowSyntheticDefaultImports
属性,以允许以这种方式导入没有默认导出的模块:型
在这篇文章中,我还解释了如果(由于某些非常奇怪的原因)您想使用
template.default
,如何实现这一点。h7wcgrx34#
对于您的错误:
raw-loader.d.ts
:字符串
eqfvzcg85#
对我来说,去掉“!!”来自@Nicolas的回答作品
字符串
我没有时间去潜水,但以防万一有人需要它。我使用的是typescript@4.9.5和next@13.4.7