成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

工程實(shí)戰(zhàn)-ES6環(huán)境配置

novo / 463人閱讀

摘要：最近在學(xué)習(xí)語(yǔ)法，故有了從零開始搭建環(huán)境的想法。默認(rèn)會(huì)將這些輔助函數(shù)內(nèi)聯(lián)到每一個(gè)文件里，這樣文件多的時(shí)候，項(xiàng)目就會(huì)很大。

最近在學(xué)習(xí)ES6語(yǔ)法，故有了從零開始搭建ES6環(huán)境的想法。下面第一部分是單純的ES6環(huán)境配置，第二部分是基于webpack環(huán)境的工程配置
1. 純ES6環(huán)境配置 1.1 packages中的依賴項(xiàng)： 
"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: 用于命令行轉(zhuǎn)碼

（2）babel-preset-env：將基于你的實(shí)際瀏覽器及運(yùn)行環(huán)境，自動(dòng)的確定babel插件及polyfills，轉(zhuǎn)譯ES2015及此版本以上的語(yǔ)言

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

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

（5）babel-plugin-transform-runtime:在轉(zhuǎn)換 ES2015 語(yǔ)法為 ECMAScript 5 的語(yǔ)法時(shí)，babel 會(huì)需要一些輔助函數(shù)，例如 _extend。babel 默認(rèn)會(huì)將這些輔助函數(shù)內(nèi)聯(lián)到每一個(gè) js 文件里，這樣文件多的時(shí)候，項(xiàng)目就會(huì)很大。所以 babel 提供了 transform-runtime 來(lái)將這些輔助函數(shù)“搬”到一個(gè)多帶帶的模塊 babel-runtime 中，這樣做能減小項(xiàng)目文件的大小

1.2 .babelrc配置 
{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

presets 中 env 標(biāo)識(shí)：將基于你的實(shí)際瀏覽器及運(yùn)行環(huán)境
其中 modules有以下選項(xiàng)

"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中的依賴項(xiàng) 
"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中的配置，對(duì)比上面的 babel-plugin-transform-runtime babel-preset-env babel-polyfill babel-preset-stage-0 四項(xiàng)是沒(méi)有變化的

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

（2）babel-loader 將babel轉(zhuǎn)化為webpack能夠轉(zhuǎn)化的文件

（3）webpack webpack-dev-server webpack包及服務(wù)

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"]//后綴名自動(dòng)補(bǔ)全
  },
  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 啟動(dòng)服務(wù)
--open 自動(dòng)打開
--hot 啟動(dòng)熱更新

2.5 最終工程目錄 
.
├── dist
├── index.html
├── node_modules
├── package.json
├── src
└── webpack.config.js

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92817.html

相關(guān)文章

  • 工程實(shí)戰(zhàn)-vue在vscode的環(huán)境配置

    摘要：基礎(chǔ)開發(fā)插件圖標(biāo)美化調(diào)試代碼格式化代碼格式化代碼規(guī)范語(yǔ)法提示必備及相關(guān)技術(shù)棧語(yǔ)法提示文件高亮格式化編碼支持自動(dòng)閉合標(biāo)簽自動(dòng)更改對(duì)應(yīng)標(biāo)簽名自動(dòng)補(bǔ)全路徑本地項(xiàng)目管理右擊在瀏覽器打開文件支持支持友好化配置基礎(chǔ)設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置配 1. vscode基礎(chǔ)開發(fā)插件 vscode-icons 圖標(biāo)美化 Debugger for Chrome 調(diào)試 Beautify 代碼格式化 Pretti...

    solocoder 評(píng)論0 收藏0

  • 從 0 開始，vue 項(xiàng)目實(shí)戰(zhàn)（一）

    摘要：前言從開始開發(fā)一個(gè)的項(xiàng)目。下載首先需要下載一個(gè)命令行工具，話說(shuō)我是電腦管家里面直接下載的，也可以點(diǎn)這里下載如果有的話就不需要了，自帶的命令行也是可以的。使用命令行然后新建個(gè)文件夾放你的項(xiàng)目，進(jìn)入文件夾，右鍵打開命令行工具。 前言 從 0 開始開發(fā)一個(gè) vue 的 SPA 項(xiàng)目。如果你還沒(méi)有學(xué)習(xí)過(guò) vue，請(qǐng)先按照 官網(wǎng) 或者 社區(qū) 的教程做一遍。像這樣，做幾個(gè)例子，不然的話看這篇文章的...

    wawor4827 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

  • webpack實(shí)戰(zhàn)

    摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動(dòng)加前綴使用下一代語(yǔ)法等，目前越來(lái)越多的人開始用它，它很可能會(huì)成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁(yè)面：全棧開發(fā)，獲取更多信息?？祚R加鞭，加班加點(diǎn)，終于把這個(gè)文檔整理出來(lái)了，順便深入地學(xué)習(xí)一番，鞏固知識(shí)，就是太累人，影響睡眠時(shí)間和質(zhì)量。極客就是想要把事情做到極致，開始了就必須到達(dá)終點(diǎn)。 原文鏈接：webpack實(shí)戰(zhàn)，原...

    cyrils 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<