一般如何在 TypeScript 中导入库？

如何解决一般如何在 TypeScript 中导入库？

我是 TypeScript 的新手，只是在钻研那个兔子洞。我想，到目前为止我已经理解了这个概念，但我不明白的是我最终是如何使用库的（在我的例子中是 D3 来操作 SVG DOM）。在 vanilla Javascript 中，我只是通过一个接一个地包含库和我的 main.js 脚本来完成它，但是随着我的项目的增长，我想通过模块化方法来利用 TypeScript 的优势。

当前问题是此浏览器错误 (Chrome)：

未捕获的类型错误：无法解析模块说明符“d3”。相对引用必须以“/”、“./”或“../”开头

好吧，我知道它指向我的导入语句，但我不知道如何解决它。

tsconfig.json

    {
        "compilerOptions": {
            "target": "ES5",'ESNEXT'. */
            "module": "ESNext","declaration": true,"outDir": "./dist/fgn/","rootDir": "./src/fgn/","strict": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"skipLibCheck": true,// required to avoid checking d3 type definitions
            "forceConsistentCasingInFileNames": true
        }
        //,"files": [],// "include": [],// "exclude": []
    }

index.html（摘录）

    <head>
        <script src="../dist/fgn/fgn.js" type="module"></script>
    </head>
    <body>
        <button id="testButton" onClick="unreachableFoo();">Test Script</button>
    </body>

./src/fgn/fgn.ts

    /*  Assuming I want to use the whole library. That's how it is documented by Mike Bostock.
        However,this import statement throws an error in the browser (tested in Chrome,Firefox)
        when being transpiled to javascript */
    import * as d3 from "d3"; // points to '[root]/node_modules/@types/d3' (index.d.ts)

    console.log('script is running...');

    // This is the desired functionality I want to gain: having access to d3 from global namespace (globalThis ?)
    d3.select('#testButton').on('click',() => {alert('button clicked!');});

    // Also this is not working. The browser complains the function is not defined.
    function unreachableFoo() { console.log('foo'); }

我尝试了多个 tsconfig 设置并将导入更改为指向“[root]/node_modules/d3/”（index.js），同时在 tsconfig 中启用“allowJs”，但这导致了进一步的问题，因为 tsc 以某种方式包含node_modules/@types/ 路径导致那里的声明文件混乱和错误。

另一个尝试是使用 webpack，设置 package.json 并从那里构建依赖项。也许我在正确的轨道上，但浏览器错误仍然存在。

我错过了什么？

解决方法

欢迎！ D3 文档会有点难以遵循，因为它使用的是 JS 而不是 TS 的 import 语句。尝试将导入语句切换为

In[1]:=  Begin["fibo`"]
   f = Table[1,{46}]; count = 2;
 End[];
Set::write: Tag Times in Begin[fibo`] f is Protected.
Out[1]= None

In[2]:= ??fibo`f
Out[2]= Null

In[3]:= ??fibo`count
Out[3]= Null

In[4]:= Begin["fibo`"]
Out[4]= fibo`

In[5]:= f=Table[1,{46}]; count = 2;
Out[5]= None

In[6]:= End[];
Out[6]= None

In[7]:= ??fibo`f
fibo`f = {1,1,1}
Out[7]= Null

In[8]:= ??fibo`count
Out[8]= Null

您还需要撤消对 tsconfig 的更改。

明白了，

我只是错过了 browserify 的步骤。我现在使用的是 Rollup，而不是 webpack。对于在开始该主题时遇到类似困难的任何人，这里有一些很好的解释（请花时间了解每个解释）：

How to Setup a TypeScript project using Rollup.js -- Rollup 安装和所需的 tsconfig.json 设置；不过，并非所有建议的安装都是必需的。

Missing global variable names #162 -- rollup.config.js 设置

@rollup/plugin-node-resolve -- 另外使用这个插件

Official rollup.js documentation -- RTFM

然而，rollup.config.js 中的 Rollup 特定字段随着时间的推移发生了变化，例如'entry' 属性被重命名为 'input'。这是我按照上述教程当前的配置：

/* buil-in */
import resolve from '@rollup/plugin-node-resolve';
/*  Install both plugins:
    npm i @rollup/plugin-babel @rollup/plugin-commonjs --save-dev
*/
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default [
    {
        input: 'src/scripts/main.js',// change this accordingly
        plugins: [
            resolve({
                jsnext: true,main:   true,browser:true,}),commonjs(),babel({
                exclude: 'node_modules/**',})
        ],output: {
            name: 'main',file: 'public/scripts/main.js',// change this accordingly
            /*  format: 'iife' wraps everything into a self-executing function
                (function () { ... }());
            */
            format: 'iife' // or 'cjs'
        }
    }
];

不过，这还没有缩小代码。这只是一个开发设置，但您也可以添加一个生产设置。

package.json 构建脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1","build": "tsc -b && rollup -c rollup.config.js"
  }

一般如何在 TypeScript 中导入库？

如何解决一般如何在 TypeScript 中导入库？

解决方法

相关推荐