開発用のwebpack.configとpackage.jsonとか(随時更新)

概要

  • 自宅開発用にまとめておきます
  • まだ作成中ですができるだけ最新の状態に保って、開発途中のツールとかでもバンバン入れて行きたいと思います(趣味用なので)
  • todoのセクションに今後追加・作成予定の項目のリストがあります
  • 一応、実行環境も…

    • Mac OS Sierra
    • MacBook Pro (Retina)
  • 更新履歴

    • 2018 6/27 eslint と prettier 導入
    • 2018 6/28 Flow 導入

React(jsx) + Redux で開発する場合

ディレクトリ構成

開発用ファイル

package.json

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    {
    "name": "redux",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "dependencies": {
    "autoprefixer": "^8.6.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "create-react-app": "^1.5.2",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.1",
    "eslint-plugin-react": "^7.9.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "husky": "^0.14.3",
    "lint-staged": "^7.2.0",
    "postcss-loader": "^2.1.5",
    "prettier": "^1.13.6",
    "prettier-eslint": "^8.8.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.12.0"
    },
    "devDependencies": {
    "babel-eslint": "^8.2.5",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "eslint-plugin-flowtype": "^2.49.3",
    "flow-bin": "^0.75.0",
    "flow-typed": "^2.4.0"
    }
    }

webpack.config.js

  • extract-text-webpack-pluginを使用しない場合はccsがjsに含まれることになる。
    使用した場合はoutputで指定したディレクトリをルートとして任意のファイル名で書き出される
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    const path = require('path');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');

    module.exports = {
    mode: 'production',
    entry: './routes.js',
    output: {
    path: path.resolve(__dirname, 'dest'),
    filename: 'bundle.js',
    publicPath: '/assets/',
    },
    module: {
    rules: [
    {
    enforce: 'pre',
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    },
    {
    test: /\.(js|jsx)$/,
    use: [
    {
    loader: 'babel-loader',
    },
    ],
    exclude: /node_modules/,
    },
    {
    test: /\.styl$/,
    use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: 'css-loader!stylus-loader',
    }),
    exclude: /node_modules/,
    },
    ],
    },
    resolve: {
    extensions: ['.js', '.jsx', 'stylus'],
    },
    plugins: [
    new ExtractTextPlugin('style.css'),
    ],
    };

.babelrc

  • この配列の中に配列ネストするみたいな書き方がややこしいので注意
  • 1
    2
    3
    4
    {
    "presets": [["env"],["react"]],
    "plugins": [["transform-flow-strip-types"]]
    }

.eslintrc.json

  • eslint + prettier の設定
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    {
    "env": {
    "browser": true,
    "es6": true
    },
    "extends": ["prettier","eslint:recommended","airbnb","plugin:flowtype/recommended"],
    "parser": "babel-eslint",
    "parserOptions": {
    "ecmaFeatures": {
    "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
    },
    "plugins": [
    "prettier",
    "flowtype"
    ],
    "rules": {
    "linebreak-style": [
    "error",
    "unix"
    ],
    "quotes": [
    "error",
    "single"
    ],
    "semi": [
    "error",
    "always"
    ],
    "no-console": "off",
    "flowtype/define-flow-type": 1,
    "flowtype/use-flow-type": 1
    }
    }

.eslintignore

  • eslint を使用しないファイルを指定
  • node_modulesはいらんかも
  • 1
    2
    3
    dest
    webpack.config.js
    node_modules

.flowconfig

  • 静的型付けチェックにflowを使ってます
    • tsに切り替えます絶対
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [ignore]
    */node_modules/*
    [include]

    [libs]
    ./interfaces/global.js
    [lints]

    [options]
    module.file_ext=.styl
    [strict]

Vue + vuex で開発する場合

  • todo

現状で対処しているエラー 2018/6/21

todo

  • 画像をcssスプライトするプラグイン入れる
  • css内のurlに関するプラグイン入れる
  • stylus + postcss
  • テストやバリデーション用モジュールの追加
  • vueバージョンの作成
  • FlowとTypescriptとか
  • 脱webpack対策
    • parcelでバンドルする記述も作成
    • gulpでバンドルする記述作成(優先度低)
    • 各モジュール単体での使用方法(優先度低)

URL