在JavaScript项目中正确是使用ES7的语法

现在前端工程师出去面试,不能避免的问到的是ES6的语法,但是所问到的都是一些比较简单的语法、或者在web开发中使用webpack构建的前端项目,作为一个全栈工程师来说,使用nodejs写后端项目,我们会使用到ES6的语法,自然会用来类、面向切面编程使用到装饰器等一些ES7的语法。

一、在node项目中正确的使用ES7的配置

  • 1、创建一个项目文件夹

  • 2、初始化项目

    npm init --yes
    
  • 3、安装babel所需要的包

    npm i @babel/core@7.1.6 babel-core@^6.26.3 babel-plugin-transform-es2015-modules-commonjs@6.26.2 babel-polyfill@6.26.0 babel-preset-env@1.7.0 babel-preset-latest-node@2.0.2 babel-register@6.26.0 babel-plugin-transform-decorators-legacy -S
    
  • 4、在根项目下创建.babelrc文件babeljs官网

    {
      "presets": ["env"],
      "plugins": ["transform-es2015-modules-commonjs", "transform-decorators-legacy"]
    }
    
  • 5、在根目录下创建一个index.js作为主入口文件

    require('babel-register');
    const babel = require('@babel/core');
    const babelPresetLatestNode = require('babel-preset-latest-node');
    
    babel.transform('code();', {
      presets: [[babelPresetLatestNode, {
        target: 'current',
      }]],
    });
    
    require('babel-polyfill');
    require('./src');
    
  • 6、我们日常的业务代码写在src文件夹下的index.js

  • 7、另外补充:如果你想运行命令行的方式操作(可以参考nodejs脚手架)

    • 在项目的根目录下创建一个bin的文件夹

    • 里面随便创建一个文件

      #!/usr/bin/env node
      require('../'); // 表示执行根目录下index.js文件
      
    • package.json文件中配置

      "bin": {
      	"learn": "./bin/learn.js" 
      	// learn表示命令: 后面表示文件所在位置
      },
      
    • 运行命令,建立连接

      npm link
      
    • 直接在命令行中运行learn命令就可以

  • 8、具体代码见(node-cli分支)

二、如果你是使用webpack构建web项目的时候就直接在webpack.config.js中配置就好

  • 1、初始化项目

  • 2、安装包

    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-decorators": "^7.2.3",
    "@babel/preset-env": "^7.2.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.13"
    
  • 3、项目下创建一个.babelrc的文件

    {
      "presets": ["@babel/preset-env"],
      "plugins": [
        ["@babel/plugin-proposal-decorators", {"legacy": true}],
        "transform-es2015-modules-commonjs",
      ]
    }
    
  • 4、配置webpack.dev.config.js文件

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        path: __dirname,
        filename: './dist/bundle.js',
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './index.html',
        })
      ],
      module: {
        rules: [
          {
            test: /\.js?$/,
            exclude: /(node_modules)/,
            use: [
              {
                loader: 'babel-loader',
              }
            ]
          }
        ]
      },
      devServer: {
        contentBase: path.join(__dirname, './dist'),
        open: true,
        port: 9000,
        disableHostCheck: true,
      }
    }
    
  • 5、具体代码见(es6-webpack分支)

上一篇:ES7基础篇-02-集群原理


下一篇:es7、es8新增语法概述