标签: ts-loader

我尝试使用typescript 3.7Optional Chaining、Nullish Coalescing 等功能。但是在转换时webpack给我一个错误。

app: Module parse failed: Unexpected token (50:40)
app: File was processed with these loaders:
app:  * ../../../node_modules/ts-loader/index.js
app: You may need an additional loader to handle the result of these loaders.
app: | export const Layout = (props) => {
app: |     const regionsResults = useQuery(regionsQuery, { fetchPolicy: 'cache-first' });
app: >     const regions = regionsResults.data?.regions ?? [];
app: |     const userItem = useQuery(usersProfileQuery, { fetchPolicy: 'cache-first' });
app: |     const …

我构建了一个继电器小webpack和打字稿演示.如果我用webpack.config.js运行webpack我收到此错误:

ERROR in ./js/app.ts
Module not found: Error: Can't resolve './MyModule' in '/Users/timo/Documents/Dev/Web/02_Tests/webpack_test/js'
 @ ./js/app.ts 3:17-38

我不知道问题是什么.模块导出应该是正确的.

文件夹结构

webpack.config.js

const path = require('path');

module.exports = {
    entry: './js/app.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {test: /\.ts$/, use: 'ts-loader'}
        ]
    }
};

tsconfig.json

{
  "compilerOptions": {
        "target": "es5",
        "suppressImplicitAnyIndexErrors": true,
        "strictNullChecks": false,
        "lib": [
            "es5", "es2015.core", "dom"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist"
    },
    "include": [
        "js/**/*"
    ]
}

SRC/app.js

import { MyModule } …

编辑 1：将 GitHub URL 添加到项目中

编辑2：删除baseUrl修复tsconfig.json所有问题并使用相对导入效果很好。

链接：Github

如何生成带有相对路径而不是 的打字稿声明文件alias？

我正在 UMD 模式下创建一个库（samplelibrary）并将其发布到 npm 中。打包的 npm 库只有build文件夹（带有类型），package.json并且README.md

当我尝试在另一个打字稿应用程序中使用该库时，由于生成的类型声明文件无效，构建失败。类型声明文件包含别名而不是相对路径。

编译日志：

ERROR in /workspace/myproject/node_modules/samplelibrary/build/typings/src/foo.d.ts(403,17): TS2307: Cannot find module 'utils/bar

如何解决这个问题？

实际创建的声明文件foo.d.ts：

declare const Foo: {
   bar: typeof import("utils/bar");
}

预期文件：

declare const Foo: {
   bar: typeof import("./utils/bar");
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "rootDir": "./",
    "baseUrl": "./src",
    "paths": {
      "@samplecompany/sampleproject": ["./"]
    }, …

Typescript 1.8现在支持无类型的JS文件.要启用此功能,只需添加编译器标志--allowJs或将"allowJs":true添加到tsconfig.json中的compilerOptions

通过https://blogs.msdn.microsoft.com/typescript/2016/01/28/announcing-typescript-1-8-beta/

我正在尝试导入没有打字文件的react-tap-event-plugin.

import * as injectTapEventPlugin from 'injectTapEventPlugin'; 

说找不到模块.所以我试过:

import * as injectTapEventPlugin from '../node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js';

这表示模块解析为非模块实体,无法使用此结构导入.然后我尝试了:

import injectTapEventPlugin = require('../node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js');

它与崩溃ERROR in ./scripts/index.tsx Module build failed: TypeError: Cannot read property 'kind' of undefined的node_modules/typescript/lib/typescript.js:39567

我的tsconfig:

{
  "compilerOptions": {
  "target": "ES5",
  "removeComments": true,
  "jsx": "react",
  "module": "commonjs",
  "sourceMap": true,
  "allowJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

我正在使用带有ts-loader的webpack:

 {
   test: /\.tsx?$/,
   exclude: ['node_modules', 'tests'],
   loader: 'ts-loader'
 }

有一个TypeScript,Babel,React和Karma示例.

Webpack配置包含带有ts-loader .tsx?文件的babel-loader .

请解释为什么需要它？为什么ts-loader不够用？

以下是我的webpack.config.js

    var webpack = require('webpack'),
  path = require('path'),
  yargs = require('yargs');

var libraryName = 'MyLib',
  plugins = [],
  outputFile;

if (yargs.argv.p) {
  plugins.push(new webpack.optimize.UglifyJsPlugin({
    minimize: true
  }));
  outputFile = libraryName + '.min.js';
} else {
  outputFile = libraryName + '.js';
}

var config = {
  entry: [
    __dirname + '/src/TestClass.ts'
  ],
  devtool: 'source-map',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader', //Something wrong here
      exclude: /node_modules/ …

所以我试图比较这两种组合的输出编译代码。

ts-loader

  {
    test: /\.tsx?$/,
    use: 'ts-loader',
  }

babel-loader

  use: {
      loader: 'babel-loader',
      options: {
        presets:
          [
            "@babel/preset-react",
            "@babel/preset-typescript",
          ]
      }
    }

• 我得到 babel-loader 的编译时间低于 ts-loader。
• 此外，ts-loader 看起来在幕后使用 babel，至少它在它的依赖项中。
• 此外，babel-loader 允许将缓存与cacheDirectory一起使用