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

Question

I have created Typescript project in Visual Studio Code. Added some basic configuration and have used npm to download some libs.

I have simple main.ts file with code of below:

import ApexCharts from 'apexcharts'

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

And tsconfig.json:

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

Project compiles fine but output contains require() calls. Is there any way to configure project build to incorporate imported libs into javascript output?

I'm opened to any suggestions.

Answer 1

To use typescript and output a module for usage in the browser you need another compiler that knows how to do this. By following the instructions on the TypeScript website we can use Browserify to transpile into browser code.

First we install local versions of tsify and typescript (A global version doesn't work):

npm install tsify typescript --save-dev

Next we write our code:

import ApexCharts from 'apexcharts'

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

Then finally we add the command to our scripts in the package.json :

Note: tsify will automatically read the tsconfig.json file. However, some options are ignored

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

Lastly we build the file:

npm run build