直接从 npm 包导入 Typescript/JSX 代码

Question

我正在尝试构建一个非常基本的自定义 npm 包，它将导入到 Typescript React 应用程序（使用 CRA 创建）中。

React 应用程序 ALPHA:

import {MyText} from 'custom-package';
function App() {
   return (
      <div>
         {MyText()}
      </div>  
  );
}

现在，node_modules/custom-package 包括 package.json 和 index.ts:

index.ts

export const myText=():string=>'Hello world';

上面的代码给我以下错误：You may need an additional loader to handle the result...

1.为什么 React 应用无法解析导入的 Typescript 代码？为什么我需要转译成JS？

我的想法是 ALPHA 应用程序的 Webpack 将接管该代码。在“export”和“import”的情况下，Webpack 不是接管了吗？例如以下作品：

index.js

export const myText=()=>'Hello world';

2。上面例子中编译'export'的是Webpack。否则浏览器将无法识别它，除非我们定义 <script type='module'>。我对吗？如果是，为什么 Webpack 也不能编译 index.ts？

我希望你明白我的意思。所以，

3。是否可以直接导入 Typescript 甚至 JSX 代码，如何导入？

Answer 1

以初始形式回答每一点：

1.为什么 React 应用无法解析导入的 Typescript 代码？为什么我需要转译成JS？

Webpack 有所谓的文件加载器链；这些加载程序在 webpack.config.js 文件子集上指定，通常按项目中的扩展名和位置指定。

对于您的情况，node_modules 很可能没有被转译，因为：

并非所有应用程序都使用 Typescript。在很大程度上他们没有。
大多数库作者在他们的 package.json 中提供了一个 "main" 字段，指向一个在上传到 npm
node_modules 往往比项目代码更大（大很多），让 webpack 在每个项目构建中解析所有这些对任何人来说都是最有利的。

2。上面例子中编译'export'的是Webpack。否则浏览器不会识别它，除非我们定义 <script type='module'>。我对吗？如果是，为什么 Webpack 也不能编译 index.ts？

webpack 的作用（但同样取决于配置）是将所有文件捆绑在一起，就像这样（过于简单）：

var files = { 
   1: () => { /* transpiled code of some file */ },  
   2: () => { var myLib = require(1); /* transpiled code of some other file */ },  
   /* ...so on */
}

var require = function(id) { return files[id]() }

这里很明显，exports 不再重要，因为所有代码都已捆绑在一起；由于 #1 中概述的原因，webpack 可能无法解析 typescript。

3。是否可以直接导入 Typescript 甚至 JSX 代码，如何导入？

这是可能的，但它可能会降低构建速度。这可以通过将 .ts 加载器扩展到 node_modules 或至少 node_modules/custom-package:

来实现

定位webpack.config.js
如果您从处理 ts 文件的加载程序块中找到任何文件，请删除 exclude: /node_modules/,，或者，

将相同的加载程序添加到 node_modules -

module: {
  rules: [
    {
      test: /\.tsx?$/,
      include: /node_modules/,
      loader: 'ts-loader',
    },
  ],
},

直接从 npm 包导入 Typescript/JSX 代码

Import Typescript/JSX code directly from npm package

npm

typescript

webpack