在Next.js应用程序中捆绑依赖模块的类型记录文件以进行调试

Question

我有一个用类型记录编写的项目，它使用Next.js，我希望能够调试它(无论是在Chrome工具中还是在Intellij中)。

我试图将嵌入在Next.js中的TS文件与webpack捆绑在一起，但它不包括本地依赖的公共库中的TS文件。它只包含JS文件，这是不够的。

我的意图是包含webpack工作空间中的所有TS文件，并能够使用源代码映射来调试Chrome工具中的代码。

而且，包中没有包含来自index.tsx的./pages文件夹，这也是非常奇怪的。只有它的js编译代码。

使用的：

• Next.js 6.1.1
• 打字本3.8.3
• es5

next.config.js

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript({
    poweredByHeader: false,
    webpack: (config, {dev}) => {
        if (dev) {
            config.devtool = 'inline-source-map';
            config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.json'];
            config.output.sourceMapFilename = "[name].js.map";
        }

        return config;
    },
    distDir: '../dist',
});

{

.babelrc

"presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}

应用程序package.json

{
      "name": "project",
      "version": "0.0.1",
      "license": "UNLICENSED",
      "private": true,
      "description": "The project",
      "author": "author <author@example.com>",
      "browserslist": [
        "> 0.5%",
        "last 2 versions"
      ],
      "nodemonConfig": {
        "ignoreRoot": [
          ".git"
        ],
        "watch": [
          "src/server.js"
        ]
      },
      "dependencies": {
        "@project/common": "*"
      },
      "devDependencies": {
        "@zeit/next-typescript": "1.1.0"
      }
    }

公共库package.json

{
  "name": "@project/common",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "main": "build/index.js",
  "types": "./build/index.d.ts",
  "files": [
    "build/*"
  ],
  "scripts": {
    "package:build:dev": "tsc"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.0",
    "@types/cookie": "^0.3.1",
    "@types/dateformat": "^3.0.1",
    "@types/enzyme": "^3.1.3",
    "@types/hapi": "^17.0.19",
    "@types/hapi__basic": "^5.1.0",
    "@types/hapi__hapi": "^18.2.6",
    "@types/isomorphic-fetch": "^0.0.34",
    "@types/jasmine": "^2.5.51",
    "@types/jsdom": "^16.2.3",
    "@types/memoizee": "^0.4.2",
    "@types/moment-timezone": "^0.5.4",
    "@types/newrelic": "^3.3.0",
    "@types/next": "^6.1.1",
    "@types/node": "^13.9.0",
    "@types/react": "^16.4.7",
    "@types/react-slick": "^0.23.4",
    "@types/styled-jsx": "^2.2.7",
    "autoprefixer": "^7.1.1",
    "chokidar-cli": "^1.2.0",
    "clean-css-cli": "^4.1.5",
    "concurrently": "^3.4.0",
    "dateformat": "^3.0.2",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "jasmine": "^2.9.0",
    "jsdom": "^16.3.0",
    "node-sass": "^4.11.0",
    "nodemon": "^1.12.1",
    "postcss-cli": "^6.1.1",
    "react-test-renderer": "^16.4.1",
    "tslint": "^5.7.0",
    "typescript": "^3.8.3",
    "@zeit/next-typescript": "1.1.0"
  },
  "dependencies": {
    "classnames": "^2.2.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es2015.promise", "dom"],
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "inlineSourceMap": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "allowJs": true,
    "jsx": "react",
    "baseUrl": ".",
    "skipLibCheck": true,
    "paths": {
      "@project/*": ["./node_modules"]
    }
  }
}

Answer 1

在阅读您的问题时，我认为您可能混淆了声明文件和源代码映射，因此我只想区分以下几点：

• 声明
• 申报图
• 源地图

声明文件是以d.ts结尾的文件。它们描述导出项目的类型，并由TypeScript使用。他们和浏览器没有任何关系。例如，如果要将TypeScript项目发布到NPM，通常首先将其编译为JavaScript，这样就可以将其导入/执行到普通的旧JavaScript项目中。但是，由于您用TypeScript编写了该项目，您可能也希望公开所有TS优点，因此声明映射就是在这里出现的，它们描述了其他项目使用的底层JavaScript的类型。

源地图是一种重构缩小后的JavaScript以帮助调试的方法。它们与TypeScript没有任何关系，但是如果它们描述的JavaScript是由TypeScript编译器生成的，那么让编译器解释什么是精简的代码是有意义的。这就是为什么TypeScript的编译器可以选择导出源映射。

声明文件只公开其他TypeScript模块/项目的接口以正确集成库，它们不公开供其他开发人员调试的完整源代码。为此，你需要申报图。这些就像源代码映射，但它们不是将缩小的JavaScript描述为扩展的JavaScript，而是描述原始的TypeScript，从而允许您像调试TypeScript一样调试预编译的库。

因此，总之，要启用每个库，您需要编辑库tsconfig.json并添加一个或多个以下内容：

"declaration": true,
"declarationMap": true,
"sourceMap": true