ff-stream-web

git clone git://archive.git.mtrnord.blog/MTRNord/ff-stream-web.git
Log | Files | Refs | README | LICENSE

using-npm-and-webpack-as-a-build-tool.md (2640B)

      1 ## Using Yarn and Webpack as a Build Tool
      2 
      3 The [Yarn](https://yarnpkg.com/) command line utility that comes with Node.js
      4 allows you to run arbitrary scripts and [Node.js modules](https://www.npmjs.com/)
      5 without them being globally installed. This is very convenient, because other
      6 developers in your team don't need to worry about having some set of tools
      7 installed globally before they can execute build automation scripts in your
      8 project.
      9 
     10 For example, if you need to lint your JavaScript code with [ESLint](http://eslint.org/)
     11 and [JSCS](http://jscs.info/), you just install them as project's dependencies:
     12 
     13 ```shell
     14 $ yarn add eslint jscs --dev
     15 ```
     16 
     17 Add a new command line to `package.json/scripts`:
     18 
     19 ```json
     20 {
     21   "devDependencies": {
     22     "eslint": "^1.10.0",
     23     "jscs": "^2.7.0"
     24   },
     25   "scripts": {
     26     "lint": "eslint src && jscs src"
     27   }
     28 }
     29 ```
     30 
     31 And execute it by running:
     32 
     33 ```shell
     34 $ yarn run lint        # yarn run <script-name>
     35 ```
     36 
     37 Which will be the same as running `./node_modules/bin/eslint src && ./node_modules/bin/jscs src`,
     38 except that the former has a shorter syntax and works the the same way on all
     39 platforms (Mac OS X, Windows, Linux).
     40 
     41 The same way you can run [Webpack](http://webpack.github.io/) module bundler
     42 to compile the source code of your app into a distributable format. Since
     43 Webpack has numerous [configuration options](http://webpack.github.io/docs/configuration),
     44 it's a good idea to have all of them in a separate configuration file, as
     45 opposed to feeding them to Webpack's CLI as command line arguments. As a rule
     46 of thumb, you want to keep the "scripts" section in your `package.json` file
     47 short enough and easy to read.
     48 
     49 For example, you may have `src/client.js` and `src/server.js` files that used
     50 as entry points to the client-side and server-side code of your app. The
     51 following Webpack configuration file (`webpack.config.js`) can be used
     52 to bundle them into client-side and server-side application bundles -
     53 `build/public/client.js` and `build/server.js` respectively:
     54 
     55 ```js
     56 module.exports = [{
     57   context: __dirname + '/src'
     58   entry: './client.js',
     59   output: {
     60     path: __dirname + '/build/public',
     61     filename: 'client.js'
     62   }
     63 }, {
     64   context: __dirname + '/src',
     65   entry: './server.js',
     66   output: {
     67     path: __dirname + '/build',
     68     filename: 'server.js',
     69     libraryTarget: 'commonjs2'
     70   },
     71   target: 'node',
     72   externals: /node_modules/,
     73 }];
     74 ```
     75 
     76 The `npm` script for it may look like this:
     77 
     78 ```json
     79 {
     80   "devDependencies": {
     81     "webpack": "^1.12.0"
     82   },
     83   "scripts": {
     84     "build": "webpack --config webpack.config.js"
     85   }
     86 }
     87 ```
     88 
     89 You can run it as follows:
     90 
     91 ```shell
     92 $ yarn run build
     93 ```