如何搭建es6开发环境

OldPanda 发布于2019-08-23 14:26 / 442人阅读

摘要：安装此过程没有难点，略过下载完成后可以通过和来查看是否安装成功以及版本后安装新建一个目录项目名称进入该项目，然后一路回车即可。

node.js安装

此过程没有难点，略过

下载完成后可以通过node -v和npm -v来查看是否安装成功以及版本后

webpack 安装

新建一个目录(项目名称), 进入该项目，npm init, 然后一路回车即可。(会生成一个package.json文件)

在根目录下创建src目录，并在src目录下创建index.js文件

在项目的根目录下执行 npm install webpack webpack-cli --save-dev

npm install webpack-dev-server html-webpack-plugin --save-dev

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

在根目录下创建webpack.dev.config.js文件

编辑package.json文件：

"scripts": {

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

}

安装babel相关插件

npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

在项目的根目录下创建.babelrc

{

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

}

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

在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 // 端口号
    }
}

现在就可以在src下的index.js中写es6代码啦

运行npm run dev; 可以看到会自动访问 localhost:9002

GPU云服务器云服务器如何搭建java开发环境开发环境搭建搭建开发环境安卓开发环境搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100600.html

搭建es6开发与非开发环境babel-browser

摘要：前言最近打算把应用到项目中，但是如何在开发环境浏览器端直接运行已经发布一段时间了，现在大部分是在环境运行，或者通过编译之后运行。主要实现用户能够在浏览器上直接运行语法。前言最近打算把es6应用到项目中，但是如何在开发环境（浏览器端）直接运行es6？es6已经发布一段时间了，现在大部分是在node.js环境运行，或者通过babel编译之后运行。babel-browser主要实现用户能...

selfimpr 2019-08-20 17:38 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0
手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

摘要：更新日志更新完成静态页面原型修复使用的正确姿势更新添加静态页面更新添加使用方法请戳我主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个。底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单...

weapon 2019-08-20 14:15 评论0 收藏0
使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置

摘要：官方推荐不写重复的配置，即把本地和生产环境共用的配置放到一个文件，然后通过进行合并我们可以看到，通过插件，将共用配置和开发的配置进行合并定义了全局变量这个插件是为了在我们允许后，自动打开页面，避免每次都手动打开。之前只知道webpack很强大，但是一直没有深入学习过，这次从头看了一下教程，然后从0开始搭建了一个多入口网站的开发脚手架，期间遇到过很多问题，所以有心整理一下，希望能给大家...

isLishude 2019-08-02 12:02 评论0 收藏0
使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置

摘要：官方推荐不写重复的配置，即把本地和生产环境共用的配置放到一个文件，然后通过进行合并我们可以看到，通过插件，将共用配置和开发的配置进行合并定义了全局变量这个插件是为了在我们允许后，自动打开页面，避免每次都手动打开。之前只知道webpack很强大，但是一直没有深入学习过，这次从头看了一下教程，然后从0开始搭建了一个多入口网站的开发脚手架，期间遇到过很多问题，所以有心整理一下，希望能给大家...

jaysun 2019-08-26 13:23 评论0 收藏0