TypeScript progression – compilation and packaging

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

• Learn about typescript compilation and packaging today

Compile command

• tsc xxx.ts -w This command is used to listen for single TS file updates and generate JS files
• Changed output

• TSC using this command in the directory will generate the corresponding JS file for all ts

• To create a tsconfig.json file in the root directory with the content of {}, run the TSC command otherwise it will not succeed

• TSC -w Using this command in a directory will listen for changes to all ts files in the directory and also require the tsconfig.json file to exist

Compile configuration file options

• Tsconfig. json configuration details

  • includeUsed to specify which TS files need to be compiled
  • [] where to put the file path
  • ** indicates any directory
  • * represents any file

      "include": [
              // compile all ts files in the SRC directory
              "./src/**/*"
          ]
  Copy the code

  • excludeDirectory of files that do not need to be compiled
  • Default values [“node_modules”, “BOWER_COMPONets “,” jSPM_packages “]

      "exclude": [
          // Does not compile ts files in the index directory
          "./src/index/*"
      ]
  Copy the code

  • extendsDefine the inherited configuration file followed by the file path
  • It is equivalent to importing external configuration

      // Configuration file reuse
      "extends": "./src/base.config.ts".Copy the code

  • filesSpecifies the list of files to compile
  • Files need to be written one by one

          "files": [
              // Single TS file
          ]
  Copy the code

• CompilerOptions configuration

  • Target Sub-configuration item
  • Target specifies the JS version to be compiled to. The default is ES3

     "target": "ES6"
  Copy the code

  • Module Sub-configuration item
  • The modularity solution specifies the modularity specification defaults to use'none','commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'

      "module": "es2015"
  Copy the code

  • Lib sub-configuration item
  • Used to specify libraries to be used in a project that generally do not need to be changed

      "lib": ['dom']
  Copy the code

  • OutDir sub-configuration item
  • Used to specify the compiled file directory

      "outDir": "./dist"
  Copy the code

  • OutFile sub-configuration item
  • Merges the global scope code into a specified file
  • If there is modular code module should beAmd, the system

       "outFile": "./dist/app.js"
  Copy the code

  • AllowJs child configuration item
  • Whether to compile js in the directory

      "allowJs": false
  Copy the code

  • CheckJs sub-configuration item
  • Check that the JS in the directory complies with the specification

      "checkJs": false
  Copy the code

  • RemoveComments sub-configuration item
  • Whether comments are compiled

      "removeComments": false
  Copy the code

  • NoEmit child configuration item
  • Generate the compiled file

      "noEmit": false
  Copy the code

  • NoEmitOnError sub-configuration item
  • Does not compile to JS files when there are errors

      "noEmitOnError": false
  Copy the code

  • AlwaysStrict Sub-configuration item
  • Whether to enable strict mode for compiled files
  • The code goes into strict mode by default when it has modules and defaults to false

      "alwaysStrict": false
  Copy the code

  • NoImplicitAny sub-configuration item
  • An implicit any type is allowed

      "noImplicitAny": false
  Copy the code

  • NoImplicitThis sub-configuration item
  • Untyped this is not allowed

      "noImplicitThis": false
  Copy the code

  • StrictNullChecks Sub-configuration item
  • Strict null-checking

      "strictNullChecks": false
  Copy the code

  • Strict Indicates the sub configuration item
  • All strict master switches are turned on if true

       "strict": false
  Copy the code

Webpack packages TS code

• Initialize the project NPM init
• Installation depends on NPM I -D webpack webpack- CLI typescript TS-loader
• Write the webpack configuration file webpack.config.js

const path  = require('path')
    // all configuration information in webpack should be written in module.exports
    module.exports = {
        // Import file
        entry:"./src/index.ts".// Specify the output path of the packaged file
        output: {
            path:path.resolve(__dirname,'dist'),
            // The packaged file
            filename:'bundle.js',},// Specify the module to use when webpack is packaged
        module: {// Specify the rules to load
            rules:[
                {
                    // Specify the file in which the rule takes effectTest: / \. Ts $/,// The loader to use
                    use:'ts-loader'.// Files to be excluded
                    exclude:/node-modules/}}}]Copy the code

• Add commands to package.json files

"build": "webpack"

• Run NPM Run build to pack

conclusion

• Take a look at this thousand-character article to get you started with typescript
• That’s where typescript compilation and packaging ends