如何搭建es6開(kāi)發(fā)環(huán)境

OldPanda 發(fā)布于2019-08-23 14:26 / 483人閱讀

摘要：安裝此過(guò)程沒(méi)有難點(diǎn)，略過(guò)下載完成后可以通過(guò)和來(lái)查看是否安裝成功以及版本后安裝新建一個(gè)目錄項(xiàng)目名稱(chēng)進(jìn)入該項(xiàng)目，然后一路回車(chē)即可。

node.js安裝

此過(guò)程沒(méi)有難點(diǎn)，略過(guò)

下載完成后可以通過(guò)node -v和npm -v來(lái)查看是否安裝成功以及版本后

webpack 安裝

新建一個(gè)目錄(項(xiàng)目名稱(chēng)), 進(jìn)入該項(xiàng)目，npm init, 然后一路回車(chē)即可。(會(huì)生成一個(gè)package.json文件)

在根目錄下創(chuàng)建src目錄，并在src目錄下創(chuàng)建index.js文件

在項(xiàng)目的根目錄下執(zhí)行 npm install webpack webpack-cli --save-dev

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

webpack-dev-server是啟動(dòng)一個(gè)本地的服務(wù)，html-webpack-plugin是一個(gè)插件，用來(lái)使用html的模板

在根目錄下創(chuàng)建webpack.dev.config.js文件

編輯package.json文件：

"scripts": {

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

}

安裝babel相關(guān)插件

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

在項(xiàng)目的根目錄下創(chuàng)建.babelrc

{

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

}

修改webpack.dev.config.js 并運(yùn)行

在webpack.dev.config.js種添加內(nèi)容

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"), //運(yùn)行的目錄
       open: true, // 自動(dòng)刷新瀏覽器
       port: 9002 // 端口號(hào)
    }
}

現(xiàn)在就可以在src下的index.js中寫(xiě)es6代碼啦

運(yùn)行npm run dev; 可以看到會(huì)自動(dòng)訪(fǎng)問(wèn) localhost:9002

GPU云服務(wù)器云服務(wù)器如何搭建java開(kāi)發(fā)環(huán)境開(kāi)發(fā)環(huán)境搭建搭建開(kāi)發(fā)環(huán)境安卓開(kāi)發(fā)環(huán)境搭建

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100600.html

相關(guān)文章

搭建es6開(kāi)發(fā)與非開(kāi)發(fā)環(huán)境babel-browser

摘要：前言最近打算把應(yīng)用到項(xiàng)目中，但是如何在開(kāi)發(fā)環(huán)境瀏覽器端直接運(yùn)行已經(jīng)發(fā)布一段時(shí)間了，現(xiàn)在大部分是在環(huán)境運(yùn)行，或者通過(guò)編譯之后運(yùn)行。主要實(shí)現(xiàn)用戶(hù)能夠在瀏覽器上直接運(yùn)行語(yǔ)法。前言最近打算把es6應(yīng)用到項(xiàng)目中，但是如何在開(kāi)發(fā)環(huán)境（瀏覽器端）直接運(yùn)行es6？es6已經(jīng)發(fā)布一段時(shí)間了，現(xiàn)在大部分是在node.js環(huán)境運(yùn)行，或者通過(guò)babel編譯之后運(yùn)行。babel-browser主要實(shí)現(xiàn)用戶(hù)能...

selfimpr 2019-08-20 17:38 評(píng)論0 收藏0
webpack 項(xiàng)目構(gòu)建：（二）ES6 編譯環(huán)境搭建

摘要：本質(zhì)就是一個(gè)編譯器，通過(guò)將源代碼解析成抽象語(yǔ)法樹(shù)將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標(biāo)代碼的將目標(biāo)代碼的轉(zhuǎn)換成代碼。項(xiàng)目構(gòu)建三開(kāi)發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門(mén)阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??在上一章 webpack 項(xiàng)目構(gòu)建：（一）基本架構(gòu)搭建我們搭建了一個(gè)最基本的 webpack 項(xiàng)目，現(xiàn)...

marser 2019-08-22 15:08 評(píng)論0 收藏0
手把手教你用es6+vue2+webpack2+vue-router2搭建個(gè)人blog

摘要：更新日志更新完成靜態(tài)頁(yè)面原型修復(fù)使用的正確姿勢(shì)更新添加靜態(tài)頁(yè)面更新添加使用方法請(qǐng)戳我主要作用就是在你開(kāi)發(fā)環(huán)節(jié)在后端同學(xué)還未開(kāi)發(fā)完成的情況下，提供一個(gè)。底下評(píng)論說(shuō)是標(biāo)題黨，或者是光扔個(gè)github地址上來(lái)的同學(xué)我就不說(shuō)什么了。你們有看看倉(cāng)庫(kù)的提交記錄么？我還沒(méi)有吃撐到開(kāi)個(gè)倉(cāng)庫(kù)去騙star.我的出發(fā)點(diǎn)就是每天更新一部分代碼，教大家用我所提到的技術(shù)棧搭建一個(gè)blog，我的出發(fā)點(diǎn)就是這么簡(jiǎn)單...

weapon 2019-08-20 14:15 評(píng)論0 收藏0
使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄，根據(jù)頁(yè)面文件自動(dòng)更改配置

摘要：官方推薦不寫(xiě)重復(fù)的配置，即把本地和生產(chǎn)環(huán)境共用的配置放到一個(gè)文件，然后通過(guò)進(jìn)行合并我們可以看到，通過(guò)插件，將共用配置和開(kāi)發(fā)的配置進(jìn)行合并定義了全局變量這個(gè)插件是為了在我們?cè)试S后，自動(dòng)打開(kāi)頁(yè)面，避免每次都手動(dòng)打開(kāi)。之前只知道webpack很強(qiáng)大，但是一直沒(méi)有深入學(xué)習(xí)過(guò)，這次從頭看了一下教程，然后從0開(kāi)始搭建了一個(gè)多入口網(wǎng)站的開(kāi)發(fā)腳手架，期間遇到過(guò)很多問(wèn)題，所以有心整理一下，希望能給大家...

isLishude 2019-08-02 12:02 評(píng)論0 收藏0
使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄，根據(jù)頁(yè)面文件自動(dòng)更改配置

摘要：官方推薦不寫(xiě)重復(fù)的配置，即把本地和生產(chǎn)環(huán)境共用的配置放到一個(gè)文件，然后通過(guò)進(jìn)行合并我們可以看到，通過(guò)插件，將共用配置和開(kāi)發(fā)的配置進(jìn)行合并定義了全局變量這個(gè)插件是為了在我們?cè)试S后，自動(dòng)打開(kāi)頁(yè)面，避免每次都手動(dòng)打開(kāi)。之前只知道webpack很強(qiáng)大，但是一直沒(méi)有深入學(xué)習(xí)過(guò)，這次從頭看了一下教程，然后從0開(kāi)始搭建了一個(gè)多入口網(wǎng)站的開(kāi)發(fā)腳手架，期間遇到過(guò)很多問(wèn)題，所以有心整理一下，希望能給大家...

jaysun 2019-08-26 13:23 評(píng)論0 收藏0