在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分支)