Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?
@fuubit

yarn, webpack, babel, ビルドできる環境を作る

More than 1 year has passed since last update.

想定されるディレクトリ構成

.
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           ├── hello.js
│           └── goodbye.js
└── webpack.config.js

package.json作成

yarn init -y

package.jsonが生成される

webpack, webpack-cliをローカルインストール

yarn add webpack webpack-cli --dev

webpack:モジュールをバンドルしてくれる
webpack-cli:webpackコマンドを使うために必要

--dev するとdevDependencies に追記される
(単にyarn addした場合は、dependenciesに追記される)

  • devDependenciesは開発時にのみ必要なモジュール
  • dependenciesは実行時にも必要なモジュール

参考:Qiita ちゃんと使い分けてる? dependenciesいろいろ。
参考:https://docs.npmjs.com/files/package.json#dependencies
参考:Qiita CLI 環境構築 グローバルインストールとローカルインストールの違いについて

webpack.config.js の作成

webpack.config.jsを作成して下記のように設定

webpack.config.js
// pathモジュールを読み(output.pathに絶対パスを指定するため)
const path = require('path');

module.exports = {
    // モードの設定。指定可能な値は、none, development ,production(デフォルト)
    // https://webpack.js.org/concepts/mode/#mode-development
    mode: 'development',
    // アプリケーションが実行を開始されるポイント(エントリーポイント)
    // 配列で指定すると、すべての項目が実行される
    // https://webpack.js.org/configuration/entry-context/#entry
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        // ビルド後のファイルが出力される"絶対パス"ディレクトリ
        // https://webpack.js.org/configuration/output/#outputpath
        path: path.join(__dirname, 'public/js')
    }
};

ビルドする

yarn run webpack

runコマンドは省略することができるので、以下のコマンドでもOKです。
タイプ数が減って嬉しいですね。

yarn webpack

/public/js/bundle.jsが生成される

yarn run

yarn run コマンドを使うと、ローカルインストールしたパッケージも自動的にパス(./node_modules/.bin)を通してくれる。素敵
参考:https://yarnpkg.com/lang/en/docs/cli/run/

Babelをローカルインストール

yarn add babel-loader @babel/core @babel/preset-env --dev

Babel: ECMAScriptをトランスパイルしてくれる

webpack.config.js に babelを使うための設定を追加

webpack.config.js
// pathモジュールを読み(output.pathに絶対パスを指定するため)
const path = require('path');

module.exports = {
    // モードの設定。指定可能な値は、none, development ,production(デフォルト)
    // https://webpack.js.org/concepts/mode/#mode-development
    mode: 'development',
    // アプリケーションが実行を開始されるポイント(エントリーポイント)
    // 配列で指定すると、すべての項目が実行される
    // https://webpack.js.org/configuration/entry-context/#entry
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        // ビルド後のファイルが出力される"絶対パス"ディレクトリ
        // https://webpack.js.org/configuration/output/#outputpath
        path: path.join(__dirname, 'public/js')
    },
    // https://webpack.js.org/configuration/module/#rule-conditions
    module: {
        rules: [
            {
                // 一致"しなければならない"条件。(= input時に"test"される値)
                // 正規表現、正規表現の配列が指定可能(強制ではない)
                // https://webpack.js.org/configuration/module/#condition
                test: /\.js$/,
                // "一致してはいけない"条件。文字列または文字列の配列を指定可能(強制ではない)
                exclude: /node_modules/,
                use: [
                    {
                        // ローダーの指定
                        // https://webpack.js.org/configuration/module/#ruleuse
                        loader: 'babel-loader',
                        options: {
                            presets: [['@babel/preset-env', { modules: false }]]
                        }
                    }
                ]
            }
        ]
    }
};
20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
fuubit
craftsman_software
「インフラの心配は、もうおしまい」 インフラ運用を自動化し、手作業を限りなくゼロにする会社

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
20
Help us understand the problem. What is going on with this article?