webpack、sass、react、reduxの簡易デモ入門

11394 ワード
デモ ss webpack redux react.js
最初は総合的な初歩的にこれらの技術を勉強したいだけで、簡単な構造を構築する考えが芽生えました.全体の構造には問題がないはずです.githubに載せました.アドレス:webpack、sass、react、reduxの簡易デモ入門
webpack
本質的に、webpackは現代JavaScriptアプリケーションの静的モジュールパッケージングです.webpackがアプリケーションを処理するとき、アプリケーションに必要なモジュールを含み、これらのモジュールを一つ以上のbundleにパッケージ化する依存関係図を再帰的に構築します.
私自身もwebpackの使用に慣れていません.webpackの設計思惟はまだよく分かりません.だから配置する時も無頓着な顔をしています.公式文書と一部のコミュニティの文章に沿って一歩ずつ配置しています.
  • 入口(entry)
  • 出力(output)
  • loader
  • プラグイン
  • 解析(Resolive)
    • 入り口(entry)
    起点またはアプリケーションの起点入り口です.この開始点から、アプリケーションは実行を開始します.配列を渡すと、配列の各項目が実行されます.entryフィールドは、string | [string] | object { : string | [string] }または関数「関数戻り値は上記の3つのタイプのうちの1つである」とすることができ、今回のdemoの選択はオブジェクトであり、以下のように処理する.
    entry: {
        home: './src/scripts/pages/home/index.js'
        // homecss: './src/styles/pages/home.scss'  // scss        js , webpack     js  
    },
    出力(output)
    outputは対象の一番上のキー(key)にあり、webpackがどのように出力するかを指示するオプションと、どこであなたを出力するかを指示する「bundle、assetと他のあなたが包装したり、webpackを使ってロードしたりする任意の内容」が含まれています.
    通常は、Output.filenameとoutput.path属性を通じて、webpack bundleの名前と、私たちがどこに生成したいのかを教えます.demoにおける構成は、
    output: {
        path: path.join(__dirname + '/src/dist'),
        // publicPath:'/'
        // publicPath: path.join(__dirname + '/src/dist/'), //       ，              「           URL」
        filename: 'js/[name].js'
    }
    filename: 'js/[name].js'は、入口ファイルが複数のファイルである場合には、異なる出力ファイル名を設定することができるwebpackがサポートしているからです.
    loader
    loaderはwebpackにJavaScriptではないファイルを処理させます.loaderはすべての種類のファイルをwebpackで処理できる有効モジュールに変換して、webpackの梱包能力を利用して処理してもいいです.本質的には、webpack loaderはすべての種類のファイルを、アプリケーションの依存図に変換して直接参照できるモジュールです.
    重要なのは、webpack構成でloaderを定義する場合、module.rulesではなくmodule.rulesで定義することです.
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/stage-3', '@babel/react']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // publicPath: './../', //       ，        dist   ，   css  
                    // use style-loader in development
                    fallback: "style-loader"
                })
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [
                    {   
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            useRelativePath: true, //       
                            outputPath: 'images/'
                        }
                    }
                ]
            }
            ]
    }
    以上はdemoの構成であり、webpackの構成において、loaderは2つの目標がある.
  • は、対応するloaderによって変換すべきファイルを識別する.(test属性を使う)
  • は、これらのファイルを変換して、依存図に追加することができるようにする(そして最終的にはbundleに追加する)
    • .
    同じファイルは、複数のloaderを順次使用してロードすることができ、各loaderは、パラメータを伝達して特殊処理を行うことができることが分かる.
    プラグイン(plugis)
    プラグインはwepbackの支柱機能です.webpack自体も、webpack構成で使用する同じプラグインシステムに構築されています.プラグインの目的は、loaderでは実現できない他のことを解決することです.
    webpackプラグインは、appy属性を持つJavaScriptオブジェクトです.apply属性はwebpack complerに呼び出され、comppilerオブジェクトはコンパイルライフサイクル全体でアクセスできます.
    プラグインはパラメータ／オプションを携帯することができるので、webpack構成において、plugins属性にnewインスタンスを入力してください.あなたのwebpackの使い方によって、ここには様々な方法でプラグインが使われています.Output-filenameを参照してください。,プラグインの使用demoには2つのpluginsが使用されており、extract-text-webpack-plugin&DefinePluginはいずれも公的プラグインドキュメントに従って構成されている.
    解析(Resolive)
    これらのオプションはモジュールがどのように解析されるかを設定できます.webpackは合理的なデフォルト値を提供しますが、いくつかの解析の詳細が修正される可能性があります.レレスライバーの具体的な作業について、より多くの説明がありますので、モジュールの解析方式を見てください.
    簡単に言えば、別名alias、extensionsモジュールのデフォルトのサフィックス、mainFilesデフォルトのファイルの入口など、いくつかのデフォルトのオプションを直してくれます.
    resolve: {
        mainFiles: ["index"],
        extensions: ['.js', '.jsx'],
        alias: {
            'stylepages': path.join(__dirname + '/src/styles/pages'),
            'scripts': path.join(__dirname + '/src/scripts/pages'),
            'commonjs': path.join(__dirname + '/src/scripts/common')
        }
    }
    問題にぶつかる
    webpackについてはcssファイルを入口として使用できないので、jsにcssを導入してcssの分離を行う必要があります.
    sassに関して@importを使用する場合、aliasエイリアス構成のパスを使用する場合は正確に解析されません.sass-loaderはエイリアスを使用する前に~を追加する必要があります.stylelibはエイリアスです.使用時@import '~stylelib/base.scss';はエイリアスです.sassと画像などの外部資源のパッケージ化に関する経路が一致しない場合、次のような方法があります.
  • 第1の方法は、fileloaderを構成するときに、相対パスを使用することができる.
    {
    test: /\.(png|svg|jpg|gif|jpeg)$/,
         use: [
           {   
              loader: 'file-loader',
               options: {
                   name: '[name].[ext]',
                   useRelativePath: true, //       
                   outputPath: 'images/'
                 }
              }
          ]
}
  • の第2の方法は、useRelativePathを使用するときに、既存のloaderに従ってExtractTextWebpackPluginを再抽出してもよく、新しいloaderを抽出するときに、共通経路loader
    • を構成してもよい.
    const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "css/[name].css",
    disable: process.env.NODE_ENV === "development"
});


// loader   
{
   test: /\.scss$/,
   use: extractSass.extract({
         use: [{
                loader: "css-loader"
              }, {
                 loader: "sass-loader"
              }],
       publicPath: './../', //         dist   ，   css  
       // use style-loader in development
       fallback: "style-loader"
    })
}
  • 第3の方法は、直接にすべての出力ディレクトリに現在のパッケージパスを使用して、publicPath 
    • output: {
     path: path.join(__dirname + '/src/dist'),
     publicPath:'./'
     // publicPath: path.join(__dirname + '/src/dist/'), //       ，              「           URL」
     filename: 'js/[name].js'
    }
    ss
    SassはCSSを強化するための補助ツールであり、CSS文法をベースに変数、ネスト、ミキシング、インラインimportsなどの高度な機能を追加しています.これらの展開はCSSをより強く、優雅にしています.SassおよびSassのライブラリを使用することは、Comppassのようなスタイルファイルの管理と、より効率的なプロジェクトの開発に役立ちます.
    sassを使用すると、以下のいくつかの利点が感じられます.
  • 合理的な入れ子ルールは、selectorを繰り返し書く必要がありません.
  • 変数、プレースホルダ%は、多重化
    • を提供することができます.
  • 関数、演算は非常に柔軟性を高めることができます.
    ここでは、sassの勉強を多く話しません.プラグインのリスト、sass中国語を見ることができます.
    react
    Reactは声明式を採用し、効率的かつ柔軟にユーザーインターフェースを構築するためのフレームワークである.
    学習reactの重要な内容は以下を含む.
  • jsxの書き方
  • コンポーネントComponents【props、state、Lifecycle】
  • 仮想dom、
  • コンポーネントレンダリングとdiff、Lists and Keys
    • もっと勉強します.
    redux
    ReduxはJavaScript状態容器であり、予測可能な状態管理を提供する.アプリケーションのすべてのstateは一つの対象ツリーとして一つの単一のstoreに格納されます.stateを変える唯一の方法はactionを触発し、何が起こるかを説明する対象です.actionがどのようにstateツリーを変えるかを説明するために、reducersを作成する必要があります.
  • アプリケーションのすべてのstateは、対象ツリーとして単一のstoreに格納され、最初はreducer初期認識状態によって
    • を作成する.
  • stateを変える唯一の方法はdispatchのactionをトリガすることです.
  • のactionは、実質的に1つのオブジェクトであり、最新のデータをstoreのペイロード
    • に伝えるために使用される.
  • Reducerはactionというペイロードを解析して、storeに適用します.
    • 具体的な実践中:
  • は、reducerを書き込み、初期時のstate
    • を決定する.
  • 初期reducerに基づいてstoreを作成し、store.subscribeを使用してstoreの変化時の動作を監視する
    • .
  • はactionを書き、毎回変更storeの変化を積載する
    • .
  • は、インタラクションなどの場合に、dispatchを使用して対応するactionを行います.
  • reducerはactionに応答して、storeを更新し、［store.subscribe傍受関数が実行されてページの変化を駆動します］
    • import { createStore } from 'redux';

/**
 *      reducer，    (state, action) => state     。
 *     action     state        state。
 *
 * state        ，       、  、  、
 *     Immutable.js        。      
 *   state             ，          。
 *
 *        `switch`           ，        (helper)
 *        （     ）   ，          。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

//    Redux store         。
// API   { subscribe, dispatch, getState }。
let store = createStore(counter);

//         ，           。
store.subscribe(() =>
  console.log(store.getState())
);

//      state       dispatch    action。
// action       ，          ，             
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1
    非同期redux
    redux-thunkやredux-promiseのように非同期をサポートしているmiddlewareはstoreのdispatch()方法を包装しています.これによって、dispatchはaction以外のいくつかの内容を提供します.例えば、関数やPromiseです.
    redux-react
    Redux公式提供のReactバインディングライブラリです.効率的で柔軟な特性を持っています.
    reactを結合してreduxの使用を改善しました.私たちは毎回publicPathを使ってstoreの変化を監督する必要がありません.新しいインターフェースを提供しました.
    
       store       store    

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
     state       ，
    締め括りをつける
    react-redux-demo
    webpack 3以上が必要です.
    運転方式:
    `npm install`        
`webpack`   webpack
    ディレクトリ下のstore.subscribeファイルをブラウザで開くと、結果にアクセスできます.
    ➜  react-redux-demo git:(master) tree -I node_modules 
.
├── html
│   └── pages
│       └── home.html
├── package-lock.json
├── package.json
├── readMe.md
├── src
│   ├── dist
│   │   ├── css
│   │   │   └── home.css

│   │   ├── images
│   │   │   └── head.jpeg
│   │   └── js
│   │       └── home.js
│   ├── scripts
│   │   ├── common
│   │   └── pages
│   │       └── home
│   │           ├── actions
│   │           │   ├── data.js
│   │           │   └── index.js
│   │           ├── components
│   │           │   ├── app.js
│   │           │   ├── article
│   │           │   │   └── index.js
│   │           │   └── consults
│   │           │       └── index.js
│   │           ├── index.js
│   │           ├── reducers
│   │           │   ├── data.js
│   │           │   └── index.js
│   │           └── store
│   │               └── index.js
│   └── styles
│       ├── images
│       │   └── home
│       │       └── head.jpeg
│       ├── lib
│       │   └── base.scss
│       ├── module
│       └── pages
│           └── home.scss
└── webpack.config.js
    アナログキーボード