Vue-九天磨一剣のes 6モジュール仕様、webpack、vue-cli足場の使用

es 6モジュール化

webpack

babel

解析es 7構文

解析css

解析less

解析画像

パッケージhtml

npm run build

npm run dev

基礎webpack用法

vue-cli

Es 6モジュール化

es 6とnode

es 6は、モジュール化機能、インポートモジュールおよびエクスポートモジュール、import export(seajs,requirejs)

を定義する.

nodeでは直接使用できません.esモジュールはサポートされていません.nodeはcommonjs

をサポートしています.

フロントエンドモジュール化の使用1モジュールを定義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)方式2:

   :
export default str
   :
import      from   

webpack webpack , babelの手動コンパイルは面倒で、現在流行している自動コンパイル工はwebpack gulp gruntを持っていて、vueを使ってすべてwebpackを使います.
定義:強力なモジュールローダとパッケージングツール(多くのファイルを1つにパッケージングし、開発段階で使用し、パッケージングし、オンラインにする必要はありません)-Webpackはすべてのものをモジュールと見なしています.これはWebpack設計の原則の一つです.どんなリソースでも、構成可能になります.loader、plugins構成-一般的なsrcフォルダの下にソースコードを保存し、distファイルにオンラインにするコードを保存します.

使用

インストール:グローバルにインストールとバージョンの違いが生じる可能性があるため、現在はプロジェクト にインストールされており、各人のバージョンを統一することができる.

npm i webpack --save-dev

package.jsonでスクリプトを構成し、scriptsフィールドにbuildフィールドを追加してwebpackに対応する.cmdは、現在のフォルダのコマンドラインの下でnpm run buildを実行し、webpackに実行し、webpackに実行する.cmdでwebpackが見つかりました.js、しかしこの時の環境はすでにこのディレクトリになりました.

現在のディレクトリの下にwebpackを作成する.config.jsファイル、webpackデフォルトはcommonjs仕様で、パッケージするjsで直接commonjsとes 6仕様を使用できますが、デフォルトではes 6変換はサポートされておらず、パッケージ化しかできません.es 6回転es 5はbabelコンパイルツール

に使用されます.
babel

babel-coreはbabelのコアであり、babelを使用するには

をインストールする必要があります.

babel-loader翻訳官、文法を翻訳するために使われていますが、

はもともと分かりませんでした.

babel-preset-es 2015翻訳官はes 6言語を学び、es 5に転化できる

解析es 7構文

es 2015 stage-3 stage-2 stage-1 stage-0 stage絶えず簡素化してやっとes 6

を実現した
解析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でパスが使用する相対パスが間違っていれば、絶対パスを使用すると、パソコンを変えることもできない.

base 64符号ピクチャbase 64が8 k未満でbase 64を回転する設定サイズが超えた場合にファイルを直接出力するのは一般的に8 kを基準とする

である.

シナリオ1:バックグラウンドピクチャwebpackはパッケージ化されますが、loader file-loader url-loader

が必要です.

案2: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

一般的には、ローカルでサーバを実行し、ファイルが変更されると、ブラウザ

をリフレッシュします.

ベースウェブパックの使い方
使用するパッケージ:

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はes 6のvueをサポートする.js

runtime+compiler runtimeを選択した場合、template

はサポートされません.

styleラベルscopedプロパティChromiumは最近、HTML 5の新しい特性を実現しました.範囲スタイルで、

とも呼ばれています.