Front-end modularization

As the front-end system becomes more and more complex, multi-person collaborative development has become the norm, and modular development has been widely recognized. There have been a lot of attempts on modular development. Currently, popular JS modular specifications include CommonJS, AMD, CMD and ES6 module systems. Today we will talk about ts and CommonJS and ES6.

Basic operation

ES6

  • directory

    -- a.ts;
-- b.ts;
-- c.ts;
Copy the code

    C depends on B, and B depends on A.

  • a.ts

    export const src = "hello";
Copy the code

  • B. Ts (Import)

    // Export separately
export const a = "i am a.";

// Batch export
let b = "b";
let c = "c";
export { b, c };

// Export interface
export interface Person {
  name: string;
  age: number;
}

// Export the function
export function func() {}

// Change the alias when exporting
let g = "g";
export { g as G };

// Export by default
export default function () {}

// Import the external module and change the alias
export { src as Hello } from "./a";
Copy the code

  • C. ts (Export condition)

    import { a, b, c } from "./b"; // Batch import
import { Person } from "./b"; // Import the interface
import { func as Func } from "./b"; // Alias when importing
import * as All from "./b"; // Import All members of the module and bind them to All
import Default from "./b"; // Import the default module without {}

let lily: Person = {
  name: "lily".age: 18};Copy the code

CommonJS

Node is an implementation of CommonJS

  • directory

    -- a.node.ts
-- b.node.ts
-- c.node.ts
Copy the code

    C depends on a and B.

  • a.node.ts

    // Export as a whole
let a = "a";
module.exports = a;
Copy the code

  • b.node.ts

    // exports === module.exports
// Export multiple variables
module.exports.a = "a";
exports.b = "b";
Copy the code

  • c.node.ts

    const c1 = require("./a.node");
const c2 = require("./b.node");
Copy the code

The node command looks for JS files by default, so we need to install TS-Node to help us find TS files.

ts_in_action xqq$ npm i ts-node -g
ts_in_action xqq$ ts-node ./src/node/c.node.ts
a
{ a: 'a', b: 'b' }
Copy the code

The production environment

  • tsconfig.json

    "target": "es5"./* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs"./* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
Copy the code

  • tsc

    // Default -target es3 ts_in_action XQQ $tsc. / SRC /es6/b.t -t 'target' // Target is ES3 or ES5, module is set to commonjs by default. // Target is ES6, module is es6 by default.Copy the code

Ts handling of module compatibility

  • Where is the conflict between modules?

    When processing ts files with the TSC default policy, the output is as follows

    .// Export by default, no function name required
exports["default"] = (function () {
    console.log("i am default"); }); .Copy the code

    Exports [“default”] = exports[“default”]

    Because ES6 allows top-level exports (Export Default) and secondary exports to exist at the same time. But CommonJS doesn’t allow it.

    • The module exports covering exports

      module.exports = {};
exports.a = "a";
exports.b = "b";
Copy the code
      ts_in_action xqq$ ts-node ./src/node/c.node.ts
{}
Copy the code

    • Module. exports the latter covers the former

      module.exports = {};
module.exports.a = "a";
Copy the code
      ts_in_action xqq$ ts-node ./src/node/c.node.ts
{ a: 'a' }
Copy the code

  • When does a module conflict occur?

    When modules are exported with ES6 and imported with CommonJS.

    • a.ts 
      export let a = "i am a";
export default function () {
  console.log("i am default");
}
Copy the code
    • b.node.ts 
      const c1 = require("./a.ts");
console.log(c1);
// {a: 'i am a', default: [Function (anonymous)]}
c1.default(); // "i am default"
Copy the code

  • Typescript solutions:export = 和 import = require()

    First, we try to avoid mixing modules. If we can’t avoid it, we use TS for compatibility.

    To support CommonJS and AMD exports, TypeScript provides export = syntax.

    • c.ts

      // export == module.exports
export = function () {
  console.log("i am default");
};
Copy the code

      At this point, no other secondary exports are allowed, and other members can be exported together.

      To export a module using export =, you must import the module using TypeScript’s special syntax import Module = require(“module”).

    • b.node.ts

      import c1 = require("./d.ts");
// "esModuleInterop": true, the following notation can also be used:
// import c1 from "./d"
Copy the code

The TypeScript project family

  • Don’t use TypeScript? Namespace.
  • TS effort: declared merger
  • How do I introduce external class libraries into TypeScript?
  • Get started, tsconfig (file options)
  • Get started, tsconfig (compilation option)
  • Would you like to learn a more efficient way to build TS (engineering introduction)
  • TS compiler! From ts – loader to Babel
  • Code check tool! From TSLint to ESLint
  • TS single test tool! Ts – jest and Babel/jest