如何在另一个 npm 包中导入本地包并使用 Typescript 对其进行测试？答案

【问题标题】：How can I import local package in another npm package and test it with Typescript?如何在另一个 npm 包中导入本地包并使用 Typescript 对其进行测试？
【发布时间】：2020-05-05 03:08:15
【问题描述】：

给定 3 个使用 Webpack 和 Typescript 的 npm 项目。

├── project1/
│   ├── tsconfig.json
│   ├── package.json
│   ├── src/
│   │     └── index.ts
│   └── webpack1.config.js
├── project2
    ├── index.ts
    ├── tsconfig.json
│   ├── package.json
│   └── webpack2.config.js
└── project3/
    └── index.html

如何将Project1导入Project2，然后在src html标签中使用Project2？我以一千种不同的方式（npm 链接）尝试了它，但无法对模块 Project 2 进行一些测试。我总是遇到在 Project2 中找不到模块的问题。

这是我的配置： 项目1

{
  "name": "project1",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "types": "dist/index.d.ts",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "install": "^0.13.0",
    "npm": "^6.13.6",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'COMMON1',
  },
};
-------------------------------------------------src/index.ts
export class Test1{
    public Init(){
        console.log("Hello World!!");
    }
}

项目2

module.exports = {
  entry: 'index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    library: 'common2',
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
----------------------------tsconfig.json
{
  "name": "project2",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "main": "dist/bundle.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.5",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {}
}
---------------------------------------------------------
{
  "compilerOptions": {
  "incremental": true,                
    "target": "es5",                         
    "module": "CommonJS",                    
    "outDir": "./dist/",                        
    "strict": true,                           
    "baseUrl": "./",                       
    "paths": {
      "project1": [ "../project1/src" ],
      "project1/*": [ "../project1/src/*" ]
    },
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true  
  }
}
-------------------------------------------------index.ts


 import { Test1} from "project1";  //Alwayas error!!

   new Test1().Init();
   const test1= 1;
   export { test1, Test1};

项目3

<!DOCTYPE html>
<html lang="en">
<head>
<script src="../project2/dist/bundle.js"></script>
<script>// I need common2.test1</script>
...

基本上我怎样才能在 html 中获得common2.test1。

【问题讨论】：

标签： html typescript npm webpack

【解决方案1】：

由于 PROJECT1 中的 package.json 表示您的主要文件在 dist/bundle.js 中，因此在源 PROJECT1 中执行 npm link 之前，然后在中执行 npm link project1目标PROJECT2，您需要捆绑PROJECT1，以便填充dist/ 文件夹。

TSC 编译器会说module is not found，因为dist/ 文件夹根本不存在。

【讨论】：

如果我没记错的话，还有其他替代方法而不是将 dist/bundle.js 放在主要位置？还是有其他更好的解决方案？
当然有，你可以根本不放任何“主”参数，或者使用任何其他文件夹/名称组合，这取决于你的 tsconfig.json 文件是如何完成的，你愿意在哪里放置你的编译文件等