如何搭建es6開發環境

OldPanda 發布于2019-08-23 14:26 / 475人閱讀

摘要：安裝此過程沒有難點，略過下載完成后可以通過和來查看是否安裝成功以及版本后安裝新建一個目錄項目名稱進入該項目，然后一路回車即可。

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開發環境開發環境搭建搭建開發環境安卓開發環境搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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