环境搭建(02)：babel

模块

  • @babel/cli
  • @babel/core
  • @babel/polyfill
  • @babel/preset-env
  • babel-loader

babel

Babel 是一个 JavaScript 编译器。
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

  • 语法转换
  • 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
  • 源码转换 (codemods)
  • 其他

安装

npm install --save-d @babel/cli  @babel/core @babel/polyfill @babel/preset-env babel-loader --registry=https://registry.npm.taobao.org

测试
结构

design-pattern-test
|-node_modules
|-release
|-src
    |-index.js
|-index.html
|-package.json
|-webpack.dev.config.js
|-.babelrc

index.js

class Person{
    constructor(name){
        this.name = name;
    }

    getName(){
        return this.name;
    }
}

let p = new Person('诸葛亮');
alert(p.getName());

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>测试</p>
</body>
</html>

package.json

{
  "name": "design-pattern-test",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.dev.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/release',
        filename: 'bundle.js'
    },

    module:{
        rules:[{
            test:/\.js?$/,
            exclude:/(node_modules)/,
            loader:'babel-loader'
        }]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],

    devServer: {
        contentBase: path.join(__dirname, './release'), //根目录
        open: true, //自动打开浏览器
        port: 9000
    }
}

.babelrc

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

测试

npm run dev

结果

自动打开http://localhost:9000/,并弹窗提示诸葛亮表示成功
posted @ 2020-10-30 14:47  mrtransition  阅读(99)  评论(0)    收藏  举报