配置babel打包环境

一、初始化npm

npm init -y

二、安装babel必要插件

npm install --save-dev @babel/core @babel/cli

三、安装语法转义器

npm install --save-dev @babel/preset-env

• 配置.babelrc

{
  "presets": ["@babel/preset-env"]
}

四、想要打包文件在服务端浏览器都能使用

npm install --save-dev @babel/plugin-transform-modules-umd

• 配置.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-modules-umd"
   ]
}

五、支持 async await

npm install --save-dev @babel/plugin-transform-runtime

• 配置.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-modules-umd",
    "@babel/plugin-transform-runtime"
   ]
}

六、绝对路径引用

npm install --save-dev babel-plugin-module-resolver

• 配置.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-modules-umd",
    "@babel/plugin-transform-runtime",
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "@root": "./",
        "@": "./src"
      }
    }]
  ]
}

七、要使用 import

npm install --save-dev babel-preset-env

• 配置.babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-umd",
    "@babel/plugin-transform-runtime",
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@root": "./",
          "@": "./src"
        }
      }
    ]
  ]
}

八、支持typescript

npm install --save-dev @babel/preset-typescript

编辑.balbelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-modules-umd",
    "@babel/plugin-transform-runtime",
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@root": "./",
          "@": "./src"
        }
      }
    ]
  ]
}

九、编辑package.json

设置几个快捷命令

{
    "scripts": {
      "dev": "babel src -d lib -w",
      "build": "babel src -d lib",
      "start": "npm run build && node lib/index.js"
    },
}

十、完整版

• 1、package.json

{
  "name": "babel-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "babel src/index.ts -o package/index.js -w --extensions \".ts\"",
    "build": "babel src/index.ts -o package/index.js --extensions \".ts\"",
    "start": "npm run build && node lib/index.js",
    "server": "npm run build && node lib/server/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-modules-umd": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@types/lodash": "^4.14.166",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-preset-env": "^1.7.0"
  },
  "dependencies": {
    "dayjs": "^1.9.8",
    "lodash": "^4.17.20"
  }
}

• 2、.babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-modules-umd",
    "@babel/plugin-transform-runtime",
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "@root": "./",
          "@": "./src"
        }
      }
    ]
  ]
}

• 3、tsconfig.json

{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true,
    "noImplicitAny": false
  },
  "include": ["src"],
  "files": [
    "package/types/global.d.ts"
  ]
}