如何搭建es6开发环境

node.js安装

  1. 此过程没有难点,略过
  2. 下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后

webpack 安装

  1. 新建一个目录(项目名称), 进入该项目,npm init, 然后一路回车即可。(会生成一个package.json文件)
  2. 在根目录下创建src目录,并在src目录下创建index.js文件
  3. 在项目的根目录下执行 npm install webpack webpack-cli --save-dev
  4. npm install webpack-dev-server html-webpack-plugin --save-dev

    webpack-dev-server是启动一个本地的服务,html-webpack-plugin是一个插件,用来使用html的模板

  5. 在根目录下创建webpack.dev.config.js文件
  6. 编辑package.json文件:

    "scripts": {

    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

    }

安装babel相关插件

  1. npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
  2. 在项目的根目录下创建.babelrc

    {

    "presets": ["es2015", "latest"],
    "plugins": []

    }

修改webpack.dev.config.js 并运行

  1. 在webpack.dev.config.js种添加内容

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        entry: './src/index.js',// 入口文件
        output: {
            path: __dirname,
            filename: './release/bundle.js'
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
            })
        ],
        devServer: {
           contentBase: path.join(__dirname,'./release'), //运行的目录
           open: true, // 自动刷新浏览器
           port: 9002 // 端口号
        }
    }
  2. 现在就可以在src下的index.js中写es6代码啦
  3. 运行npm run dev; 可以看到会自动访问 localhost:9002

相关推荐