es6模組化

• es6與node

  • es6定義了模組化功能,匯入模組和匯出模組,import export (seajs，requirejs)
  • 在node中不能直接使用,不支援es模組,node支援commonjs

• 前端模組化的使用
  1 定義一個模組 一個js檔案就是一個模組仍然適用
  2 匯出一個模組 export
  3 使用一個模組 import

• 引入模組依賴

<script src="https://google.github.io/traceur-compiler/bin/traceur.js
"></script>  //當瀏覽器版本較低時,不支援es6語法,引入包來解析
<script
 
 src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js
"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js
"></script>
<script src="main.js" type="module"></script>//表示當前引入的是一個模組

• 匯入匯出模組
  import一般放在檔案的最上面
  (1) 方式一:

模組一中:
export let
 
 str ='123';//匯出的時候必須要名字,通過export匯出一個變數 會在內部宣告一個物件 把變數名和值作為key和value放到這個物件中匯出
模組二:
import {str} from './A.js'   //匯入時解構賦值
或者
import * as 任意名字 from './A.js'//此時接收的是模組一的物件

問題:

引入外部解析包的原因,將外部解析包依賴去掉以後,就正常了

(2)方式二:

模組一:
export default str
模組二:
import 任意名字 from 地址

webpack

webpack包含了打包,載入模組來實現編譯 這兩大功能

定義:強大的模組載入器和打包工具(將很多檔案打包成一個,在開發階段使用,打包好了,上線不需要)
- Webpack把所有東西都看成是模組，這是Webpack設計原則之一。不管什麼資源，都變成了可配置的，都通過loader，plugins配置
- 一般src資料夾下存放原始碼,dist檔案加下存放要上線的程式碼

• 使用
  
  1. 安裝:如果安裝全域性,可能會導致版本的差異,故現在都將其安裝到專案開發依賴中,可以使每個人的版本統一.

npm i webpack --save-dev

1. 在package.json中配置指令碼,在scripts欄位裡面加上一個build欄位對應webpack.cmd,在當前資料夾的命令列下執行npm run build,會執行到webpack,再在webpack.cmd中找到webpack.js,但是這個時候的環境就已經變成了該目錄了.
   

1. 在當前目錄下建立webpack.config.js檔案,webpack預設是commonjs規範,可以直接在要打包的js中使用commonjs和es6規範,但是預設是不支援es6轉化的,只能打包,es6轉es5要用到babel編譯工具

babel

• babel-core 是babel的核心,使用babel必須安裝
• babel-loader 翻譯官,用來翻譯語法,但是它本來不懂
• babel-preset-es2015 翻譯官學會了es6語言,能轉化成es5了

解析es7語法

• es2015 stage-3 stage-2 stage-1 stage-0 stage不斷精簡才實現es6

解析css

先將css看成一個模組(webpack打包),使用css-loader翻譯官來解析,cssloader翻譯官會將css變成js,這樣的話,我們也會在dist資料夾中接收到bundle.js,但是這個時候css並不能作為標籤使用
使用:
(1) 在main.js將css檔案引入,因為我們的入口是main,這樣也會解析css
(2)webpack.config.js配置,通過style-loader來將打包成js的css轉化成style標籤放在bundle.js中使用

{test: /\.css$/, use: ['style-loader', 'css-loader']} 

解析less

需要less 和less-loader

解析圖片

如果直接使用js引入圖片,預設不會進行打包檔案,直接路徑就是字串,這樣在輸出的js中路徑如果使用的相對路徑就不對了,使用絕對路徑的話,換個電腦也不對了.

• base64碼
  小圖片base64 小於8k轉base64 設定大小 超過的時候將檔案直接輸出 一般以8k為準

• 方案一:背景圖片
  webpack會去打包,但是仍然需要一個loader file-loader url-loader

• 方案二:main.js中引入圖片的方法

import img from './1.jpg'
let oImg = document.createElement('img');
oImg.src = img;
document.body.appendChild(oImg);

index.html

打包html

以src下的html作為模板,打包後的html會預設將打包後的js檔案引入

 plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html', //預設打包出的檔案index.html
            template:'./src/index.html',
        })
    ]

npm run build

• 會輸出實體檔案dist資料夾,速度會很慢,一般上線的時候使用

npm run dev

• 一般我們本地跑一個伺服器,當檔案變化,重新整理瀏覽器
• 

基礎webpack用法

使用的包:

npm i webpack babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader less less-loader sass-loader file-loader url-loader html-webpack-plugin webpack-dev-server --save-dev

vue-cli

vue-cli 腳手架(將基礎的東西搭建好,給你自動生成模板工程)
vue-router是 vue路由外掛 支援你單頁應用的
vue-loader是webpack下loader外掛 可以把.vue檔案 輸出成元件,.vue檔案基於webpack構建的

• 安裝 命令列工具 安裝後命令行中會多vue命令.

vue --help
vue --list
vue init webpack(模板名) webpack-pro(專案名)
cd 專案
npm install
npm run dev

• 更改埠號

  專案工程資料夾-> config ->index.js->更改埠號
  

• vue.esm.js
  支援es6的vue.js

• runtime+compiler
  如果選擇的是runtime,不支援template

• style標籤scoped屬性
  Chromium 最近實現了一個HTML5的新特性：範圍樣式，又叫做