Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

Parcel is introduced

Parcel is a packaging tool similar to Webpack, but it doesn’t require any configuration to quickly package TypeScript code. For examples, see 🚀 Quick Start (parceljs.org).

Use Parcel to package TS code

  1. Initialize the project

    npm init -y
tsc --init 
Copy the code

  2. Sample code for a project where a Parcel is downloaded is as follows:

    npm i -D parcel-bundler
Copy the code

  3. Json file and configure rootDir and outDir options as follows:

    {
    "compilerOptions": {
        "target": "es5"./* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
        "module": "commonjs"./* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        // Package directory
        "outDir": "./dist"./* Redirect output structure to the directory. */
        // Package directory
        "rootDir": "./src"./* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
        "strict": true./* Enable all strict type-checking options. */
        "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */}}Copy the code

  4. Create a.ts file and an.html file and write them as follows

    // page.ts
const myName: string = 'Bowl Week'
console.log(myName)
Copy the code
    <! -- index.html -->
<! DOCTYPEhtml>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Document</title>
        <script src="./page.ts"></script>
    </head>
    <body></body>
</html>

Copy the code

  5. Configure the script option in package.json as follows:

    "scripts": {
    "test": "parcel ./src/index.html"
}
Copy the code

  6. So far we have our environment configured, compiled our code by typing NPM run test on the command line, and created a development server.

    npm run test
Copy the code

Then open http://localhost:1234/ in a browser and see the code we wrote.