babel es6学习环境正确配置？

Question

1、我今天就想简单搭建一个学习es6的环境，通过babel生成es5的文件，然后我引用在浏览器打开。不想要vue，react脚手架什么的东西，就只是练习es6功能。

2、单个babel.js引入html有很多局限性就不说了

3、我按照网上的例子，尝试了三种搭建方式都提示缺少模块，我也不知道问题出在哪里

npm v5.5.1
node v8.9.1
webpack v3.8.1
gulp v3.9.1
/////////////////////
第一种：只有babel，参考连接 https://segmentfault.com/a/11...

cnpm install --save-dev babel-cli,babel-preset-es2015
我在命令行试单独的 babel src -d dist可以成功，
但是在package.json的scipts里面写入 "build": "babel src -d dist"
运行npm run bulid无论如何都成功不了，一直提示我缺少模块，
我放弃了一直手动安装，下面只是其中一部分：

"babylon": "^6.18.0",
"balanced-match": "^1.0.0",
"brace-expansion": "^1.1.8",
"chalk": "^2.3.0",
"commander": "^2.12.2",
"concat-map": "^0.0.1",
"convert-source-map": "^1.5.1",
"core-js": "^2.5.1",
"debug": "^3.1.0",
"detect-indent": "^5.0.0",
"esutils": "^2.0.2",
"fs.realpath": "^1.0.0",
"glob": "^7.1.2",
"globals": "^11.0.1",
"js-tokens": "^3.0.2",
"minimatch": "^3.0.4",
"path-is-absolute": "^1.0.1",
"slash": "^1.0.0",
"source-map": "^0.6.1",
"to-fast-properties": "^2.0.0",
"trim-right": "^1.0.1"

第二种，webpack+babel，参考官网和连接
http://blog.csdn.net/qq_30100...
cnpm install --save-dev webpack
cnpm install --save-dev babel-loader babel-core babel-preset-2015

运行webpack后还是提示我缺少模块，core-js、to-fast-properties、babylon……

第三种，gulp+babel，参考官网
cnpm install --save-dev gulp-babel, babel-preset-env
运行webpack后还是提示我缺少模块"ansi-regex","dateformat","lodash.template"……

//////////////////////////////////////
作为一个新手我不知道那个环节我错了
或者正确的应该是怎样 2017.11.30

///////////////////////
有时候可能是浮躁
现在来看官网的教程
发现是可以一次配置成功的
快速搭建环境，不需要webpack，不需要gulp，相当于用的babel 命令行工具
官网文档 --- babel内置插件 -- CLI , 按照操作即可
如果不行，升级npm等

Answer 1

快速搭建环境，不需要webpack，不需要gulp，相当于用的babel 命令行工具
官网文档 --- babel内置插件 -- CLI , 按照操作即可
如果不行，升级npm等

Answer 2

可以按照我之前的配置来，别忘了 npm install 一下。npm start 启动服务。有一个遗留问题就是react-hot-loader没生效。其他没影响。写 es6 足够了。
https://segmentfault.com/q/10...

Answer 3

推荐安装 yarn https://yarnpkg.com/zh-Hans/

1.新建一个目录， 比如demo，在demo下执行以下命令 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，内容如下：

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

5.新建webpack配置文件 webpack.config.js，内容如下

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，内容如下

import 'babel-polyfill'

async function hello() {
    return 'hello'
}

hello().then(alert)

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

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

最终package.json内容如下

{
  "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"
  }
}

现在执行命令yarn run dev就可以运行了。