标签: ts-loader

我有以下开发设置:

• Angular2(带打字稿)
• Webpack用于包装
• Karma作为Jasmine测试的测试运行者
• Gulp用于调用Karma

Karma配置如下:

var webpackConfig = require('./webpack.config');
webpackConfig.entry = {};

module.exports = function(config) {
config.set({
    basePath: '',

    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],

    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    reporters: [],
    coverageReporter: {},
    port: 9876,
    action: 'run',
    colors: true,
    logLevel: config.LOG_INFO, // LOG_DEBUG | LOG_INFO | LOG_WARN | LOG_ERROR
    autoWatch: false,
    autoWatchBatchDelay: 300,
    singleRun: true,

    files: [ { pattern: './spec-bundle.js', watched: false } ],
    exclude: [],
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        './spec-bundle.js': ['webpack']
    },

    webpack: …

我发现我的应用程序结构和构建过程中存在使用WebPack,TypeScript和TS-Loader的问题,我认为这是由TypeScript 2.1.4引起的,但显然是在那里.

您可以从我的其他帖子中看到所有详细信息: TypeScript 2.1.4打破了webpack ts-loader中的更改

简而言之,我将Gulp和WebPack设置为/client/app.ts的入口点,现在它几乎没有任何东西(当然没有引用/ server /)但是WebPack构建过程的TypeScript编译阶段仍在尝试在/ server上运行(在我的另一篇文章中,显示来自Server文件夹的编译错误,当它应该只从Client文件夹运行时).

我做错了什么以及如何修复它以便它只在/client/.ts文件上运行,特别是从app.ts中走出结构？

这是我的回购展示了我到目前为止所做的一切:https: //github.com/CmdrShepardsPie/test-ts-app/tree/develop

谢谢

我是 webpack 的新手。目前我正在使用 webpack 开发 angular2 应用程序。作为要求的一部分，我们希望有一个不应捆绑的设置文件，以便在捆绑后也可以更改 settings.js 文件中的 URL。

下面是两个文件的代码。

设置.ts

const foo = {
    url:'localhost'
};
export { foo };

脚本文件

import { foo }  from 'settings';

两个 ts 文件都将在 bundle 之前编译为 js 文件。现在我想从包中排除 settings.ts 文件，并想在 dist 文件夹中单独复制 setting.ts 文件。

下面是 webpack.config 文件

loaders: [

            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 
                          'angular2-template-loader'],
                exclude: [/\settings.ts$/]
            },
]

我发现这没有运气。

我可以使用 CopyWebpackPlugin 复制 dist 文件夹中的 settings.js 文件。但无法从捆绑中排除 settings.ts 文件。

下面是文件夹结构的截图。Webpack.config 与 src 文件夹在同一级别

我在使用纱线工作区和打字稿设置 React 项目时遇到问题。我的文件夹结构是：

-root
 -package.json
 -workspaces
  -web
  -common

我的package.json文件是：

{
  "name": "my-project-name",
  "private": true,
  "workspaces": [
  "workspaces/web",
  "workspaces/common"
  ],
  "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
}

我的问题是：当我web从common项目导入文件时，如果它是一个.js文件，它可以正常工作，但TypeError: Object(...) is not a function在使用.ts或.tsx文件时失败。

关于我可能缺少什么的任何想法？

我在项目中使用ts-loader和fork-fs-checker-webpack-plugin，并且抱怨node_modules/@types，例如：

ERROR in D:/temp/temp-vscode/temp-electron/application-volume-    change/node_modules/@types/react/index.d.ts
ERROR in D:/temp/temp-vscode/temp-electron/application-volume-change/node_modules/@types/react/index.d.ts(2288,19):
TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement<any>' and 'ReactElement<any>'.
  Named property 'type' of types 'ReactElement<any>' and 'ReactElement<any>' are not identical.

而且也对it，describe，expect，等有错误，例如：

TS2304: Cannot find name 'describe'.
TS2304: Cannot find name 'expect'.

我试图排除以下目录tsconfig.json：

"exclude": [
  "node_modules",
  "node_modules/@types"
]

和（部分）我的webpack.config：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
...
rules: [
  {
    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader', …

我的目录结构如下：

projectRoot\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 project-server\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 pom.xml\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 project-ui\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 file.ts.  (imports ./file.js)\n

我的问题是project-server使用转译的 js 文件，因此需要.js扩展名来解析文件。我正在使用 webpack-dev-server 进行开发和使用ts-loader，但收到以下错误：

Module not found: Error: Can't resolve './file.js' in \n'/projectRoot/project-ui/src'\n

以下是我的webpack.config.js：

module.exports = {\n  entry: './project-ui/src/file1.ts',\n  mode: "development",\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.ts$/,\n        use: 'ts-loader',\n        exclude: /node_modules/\n      },\n      ... other rules\n    ]\n  },\n  resolve: {\n    extensions: ['.js', …

我正在运行一个庞大的项目，其中有数千个.js文件是用 编写的es5，出于多种原因和好处TS，我们决定开始迁移到TS，经过几天的研究和许多研究，我将详细阐述一个几点：

要开始从 迁移es5到 ，ts我们可以通过两种方式开始：

第一种方式：

1-安装ts、创建tsconfig并allowJS设置为 true，然后开始将文件扩展名更改为.ts，默认情况下一切都会正常工作

2-由于我们想要逐渐迁移，所以我们不想立即将全局脚本替换为本机模块，换句话说，我们不想立即键入importand export，而是希望保留旧的方式global scripts并使用/// <reference path="">to加载依赖项

3-在上一步之后我们可以逐渐开始将文件转换为本机模块esm

第二种方式：

1-正如我所读到的有关UMD 的内容，它将在 borwser（客户端）和服务器上工作，这意味着支持所有类型的模块AMD, CommonJS, SystemJS and Native ES modules

2-在时尚中重写脚本后UMD，我们可以逐渐开始将脚本移动到ESM

最后但并非最不重要的一点是，关于情报，我们将开始.d.ts相应地编写文件，或者我们可以依靠它ts-loader来生成文件

最后，我们要么选择ts-loader要么babel，但我们不确定每个选项是否都有一些限制

任何有关开始迁移的最佳方式的想法都值得赞赏

我正在编写使用和webpack.config.js来将 typescript（更准确地说是 tsx）转译为 ES5 。我有两个问题：tsloaderbabel-loader

babel-loader1）即使tsloader输出ES5文件，我们还需要吗？2)当目标是 时设定是否
有意义？compilerOptions.moduletsconfig.jsones6es5

tsconfig.json如下：

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "jsx": "react"
  }
}

提前致谢。

问题

[它只感染打字稿库创建者]

如果代码库包含绝对路径（通过配置tsconfig.json和 webpack），那么 typescript 编译器将生成具有相同绝对路径的所有 d.ts 文件，这些文件是无用的，因为我的 lib 消费者无法使用它们做任何事情。

解决方法

我看到的每个图书馆都在执行以下操作之一：

1. 手动创建自己的 single-file.d.ts 文件
2. 在其代码库中使用相对路径，因此输出 d.ts 文件也包含相对路径。

显然，这两种选择都很糟糕。

我想到的其他解决方案

1. 创建单个 d.ts 文件（不会导入）。

我找不到可用的库。

2. 不确定是否可能：在运行 ts-loader 之前，我们需要运行一个 magic babel-plugin，通过查看 webpack.config 文件中的 webpack-resolve-module 部分将每个绝对路径转换为相对路径。

我现在的状态

我创建了一个库，它生成带有绝对路径的损坏的 d.ts 文件：

https://github.com/stavalfi/lerna-yarn-workspaces-example/tree/master/packages/x-core

索引.ts:

import { z, x } from 'shalom'     // problem
export default function awesomeFn(y: number): x {
  return z(1)
}

export { z, x } from './shalom' . // not a problem

生成的index.d.ts：

import { x } from './shalom'; …

似乎使用 mongoose 或 @types/mongoose 进行的某些软件包升级现在导致 mongoose $push、$pull、$addToSet 和 $each 运算符出现新的打字稿错误。例如：

await User.findByIdAndUpdate(request.user._id, {
      $push: {
        mediaList: { $each: mediaIDs },
      },
    });

将鼠标悬停在 $each 上我可以看到：

   Type 'string[]' is not assignable to type 'never'.ts(2322)

我对其他运算符也遇到了同样的问题（类型“无论给定类型”不能分配给类型 never）。我想这也可能与 webpack 升级和 ts-loader 升级有关。我在用着：

"@types/mongoose": "^5.2.4",
"mongoose": "^5.2.4",
"ts-jest": "^21.2.4",
"ts-loader": "4.1.0",
"ts-node": "^3.2.0",
"tslint": "^5.11.0",
"typescript": "^3.1.6",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"