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