工程實戰-ES6環境配置

novo 發布于2019-08-22 14:03 / 418人閱讀

摘要：最近在學習語法，故有了從零開始搭建環境的想法。默認會將這些輔助函數內聯到每一個文件里，這樣文件多的時候，項目就會很大。

最近在學習ES6語法，故有了從零開始搭建ES6環境的想法。下面第一部分是單純的ES6環境配置，第二部分是基于webpack環境的工程配置

1. 純ES6環境配置 1.1 packages中的依賴項：

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1"
}

（1）babel-cli: 用于命令行轉碼

（2）babel-preset-env：將基于你的實際瀏覽器及運行環境，自動的確定babel插件及polyfills，轉譯ES2015及此版本以上的語言

（3）babel-polyfill： babel支持ES6語法部分的編譯，對于新增的類還需安裝額外的polyfill

（4）babel-preset-stage-0：為了支持async/await，這個是es7的語法

（5）babel-plugin-transform-runtime:在轉換 ES2015 語法為 ECMAScript 5 的語法時，babel 會需要一些輔助函數，例如 _extend。babel 默認會將這些輔助函數內聯到每一個 js 文件里，這樣文件多的時候，項目就會很大。所以 babel 提供了 transform-runtime 來將這些輔助函數“搬”到一個多帶帶的模塊 babel-runtime 中，這樣做能減小項目文件的大小

1.2 .babelrc配置

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

presets 中 env 標識：將基于你的實際瀏覽器及運行環境
其中 modules有以下選項

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

1.3 packages.json文件添加script

"scripts": {
  "compile": "babel src --out-dir dist"
}

compile: babel src --out-dir dist 用于將src文件夾中的文件使用babel編譯到dist文件夾

2. ES6在webpack中的配置 2.1 packages中的依賴項

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-stage-0": "^6.24.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.11.1"
}

在webpack中的配置，對比上面的 babel-plugin-transform-runtime babel-preset-env babel-polyfill babel-preset-stage-0 四項是沒有變化的

（1）babel-core 提供babel轉化的核心語法，上面的babel-cli已包涵，由于在webpack中不需要指令，直接引入core即可

（2）babel-loader 將babel轉化為webpack能夠轉化的文件

（3）webpack webpack-dev-server webpack包及服務

2.2 .babelrc配置

與上面相同

2.3 webpack.config.js配置

const path = require("path")

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  },
  module: {
    loaders: [
      {
          test: /.js$/,
          loader: "babel-loader",
          exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ["*", ".js", ".vue", ".json"]//后綴名自動補全
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {// 配置如何展示性能提示(false不提示)
    hints: false
  },
  devtool: "#eval-source-map"
}

2.4 packages.json文件添加script

"scripts": {
  "dev": "webpack-dev-server --open --hot"
}

webpack-dev-server 啟動服務
--open 自動打開
--hot 啟動熱更新

2.5 最終工程目錄

.
├── dist
├── index.html
├── node_modules
├── package.json
├── src
└── webpack.config.js

云服務器 GPU云服務器環境配置網站環境配置虛機配置環境高級環境配置

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92817.html

工程實戰-vue在vscode的環境配置

摘要：基礎開發插件圖標美化調試代碼格式化代碼格式化代碼規范語法提示必備及相關技術棧語法提示文件高亮格式化編碼支持自動閉合標簽自動更改對應標簽名自動補全路徑本地項目管理右擊在瀏覽器打開文件支持支持友好化配置基礎設置設置設置設置設置設置配 1. vscode基礎開發插件 vscode-icons 圖標美化 Debugger for Chrome 調試 Beautify 代碼格式化 Pretti...

solocoder 2019-08-21 18:22 評論0 收藏0
從 0 開始，vue 項目實戰（一）

摘要：前言從開始開發一個的項目。下載首先需要下載一個命令行工具，話說我是電腦管家里面直接下載的，也可以點這里下載如果有的話就不需要了，自帶的命令行也是可以的。使用命令行然后新建個文件夾放你的項目，進入文件夾，右鍵打開命令行工具。前言從 0 開始開發一個 vue 的 SPA 項目。如果你還沒有學習過 vue，請先按照官網或者社區的教程做一遍。像這樣，做幾個例子，不然的話看這篇文章的...

wawor4827 2019-08-22 10:45 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
webpack實戰

摘要：和類似的預處理器還有等。的用處非常多，包括給自動加前綴使用下一代語法等，目前越來越多的人開始用它，它很可能會成為預處理器的最終贏家。 webpack實戰查看所有文檔頁面：全棧開發，獲取更多信息。快馬加鞭，加班加點，終于把這個文檔整理出來了，順便深入地學習一番，鞏固知識，就是太累人，影響睡眠時間和質量。極客就是想要把事情做到極致，開始了就必須到達終點。原文鏈接：webpack實戰，原...

cyrils 2019-08-22 17:32 評論0 收藏0