Typescript项目-如何将导入的模块合并到最终版本中？

Question

我已经在Visual Studio Code中创建了Typescript项目。 添加了一些基本配置，并使用npm下载了一些库。

我有以下代码的简单main.ts文件：

import ApexCharts from 'apexcharts'

  var chart = new ApexCharts(document.querySelector("#chart"), {...});
  chart.render();

和tsconfig.json：

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,        
        "sourceMap": true,
        "target": "es5",
    }
}

项目可以正常编译，但是输出包含require（）调用。 有什么方法可以配置项目构建，以将导入的库合并到javascript输出中？

我愿意接受任何建议。

Answer 1

要使用打字稿并在浏览器中输出要使用的模块，您需要另一个知道如何执行此操作的编译器。 按照TypeScript网站上的说明，我们可以使用Browserify转换为浏览器代码。

首先，我们安装的本地版本tsify和typescript （A全球版本不工作）：

npm install tsify typescript --save-dev

接下来，我们编写代码：

import ApexCharts from 'apexcharts'

var chart = new ApexCharts(document.querySelector("#chart"), {});
chart.render();

最后，我们将命令添加到package.json中的脚本中：

注意： tsify将自动读取tsconfig.json文件。 但是， 某些选项被忽略

{
  "scripts": {
    "build": "browserify src/index.ts -p [ tsify ] > bundle.js"
  }
}

最后，我们构建文件：

npm run build