babel es6學習環(huán)境正確配置？

可以按照我之前的配置來，別忘了 npm install 一下。npm start 啟動服務。有一個遺留問題就是react-hot-loader沒生效。其他沒影響。寫 es6 足夠了。
https://segmentfault.com/q/10...

快速搭建環(huán)境，不需要webpack，不需要gulp，相當于用的babel 命令行工具
官網(wǎng)文檔 --- babel內(nèi)置插件 -- CLI , 按照操作即可
如果不行，升級npm等

推薦安裝 yarn https://yarnpkg.com/zh-Hans/

1.新建一個目錄， 比如demo，在demo下執(zhí)行以下命令 yarn init -y

2.yarn add babel-polyfill

3.yarn add --dev babel-preset-env babel-core babel-plugin-transform-runtime babel-loader webpack webpack-dev-server html-webpack-plugin clean-webpack-plugin

4.新建文件 .babelrc，內(nèi)容如下：

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 3 versions"
                    ]
                },
                "useBuiltIns": true,
                "debug": true
            }
        ]
    ],
    "plugins": [
        [
            "transform-runtime",
            {
                "polyfill": false,
                "regenerator": true
            }
        ]
    ]
}

5.新建webpack配置文件 webpack.config.js，內(nèi)容如下

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

module.exports = {
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js',
    },
    devtool: 'source-map',
    devServer: {
        port: 8080,
        open: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules')
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

6.新建入口文件 index.js，內(nèi)容如下

import 'babel-polyfill'

async function hello() {
    return 'hello'
}

hello().then(alert)

7.在package.json增加scripts命令，

 "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server"
  }

最終package.json內(nèi)容如下

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "clean-webpack-plugin": "^0.1.17",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.5"
  }
}

現(xiàn)在執(zhí)行命令yarn run dev就可以運行了。