2017.06.04
Webpack + Babel 最小構成での環境構築(2017年度6月版)
node.jsの環境が整っていれば5分で環境構築は終わるのでササッとやっちまいましょう。もしnode環境がない場合は、WindowsならNodist、Macならばnodebrewあたりでも突っ込んでさっくりと用意しちまおう!こんちくしょー!
環境
- Mac OS X El Capitan
- node v7.7.2
- npm 4.1.2
- webpack 2.6.1
準備
まずは適当なディレクトリを作って、npm が使えるようにするよ
1 2 3 |
$ mkdir babel $ cd babel $ npm init --yes |
インストール
以下のモノをインストールするよ
- babel-loader
- babel-core
- webpack
- babel-preset-env
コマンドはこんな感じで
1 |
$ npm i -D babel-core babel-loader babel-preset-env webpack |
すると package.json はこんな感じに
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "name": "Babel", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build" : "webpack --config webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-env": "^1.5.1", "webpack": "^2.6.1" } } |
scripts のところをちょこっと弄ってるよ。npm run build で webpack が走るようにしているよ
Webpackの設定
webpackの設定は webpack.confing.js というファイルを先程作成したディレクトリの直下に置き、以下の様に設定したよ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
module.exports = { entry: './src/entry.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] } } |
つぎに .babelrc とうファイルを webpack.config.js 同様の場所に作成し以下の様に設定
1 2 3 |
{ "presets": ["env"] } |
ディレクトリ構成
以下の通り。(node_modules配下は省略してるよ
1 2 3 4 5 6 7 |
. ├── dist ├── node_modules ├── package.json ├── src │ └── entry.js └── webpack.config.js |
書いてコンパイルしてみる
src/entry.js にES2015っぽいのを軽く書いてみる
1 |
const hello = 'HelloWorld'; |
保存したらターミナルで、先ほど作成したディレクトリ直下でコンパイル
1 |
$ npm run build |
すると dist に bundle.js が作成される。内容は以下の通り
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // identity function for calling harmony imports with the correct context /******/ __webpack_require__.i = function(value) { return value; }; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var hello = 'HelloWorld'; /***/ }) /******/ ]); |
無事コンパイルできましたとさ。めでたしめでたし。