Add babel aliases

README.md

@@ -14,6 +14,7 @@ Tarec takes all the best practices in the React community and makes them availab
 * Cache-busting
 * Static resources
 * Index.html fallback (for the router)
+* Simple babel aliases configuration
 
 ## How-to
 
@@ -27,14 +28,27 @@ Tarec takes all the best practices in the React community and makes them availab
 Type `tarec` to get a dev-server with hot-reload and `tarec build` to generate the optimized version of your application
 in the `dist` folder.
 
-## Static resources
+## Configuration
+
+### Static resources
 
 All the files in the `public` directory of your project will be served by the dev server and will be copied
 as-is int the `dist` directory.
 
+### Babel aliases
+
+Create a `tarec.yml` file and configure aliases like this:
+
+```yaml
+
+aliases:
+  - components: ./src/components
+  - reducers: ./src/reducers
+
+```
+
 ## Todo
 
-* Babel aliases
 * Starter project generation
 * Plugins
 * Configuration file and command-line switches

lib/bin/tarec.js

@@ -1,20 +1,30 @@
 #!/usr/bin/env node
 
 const path = require('path');
+const yaml = require('js-yaml');
+const fs = require('fs');
 
 const rootDir = path.join(__dirname, '../..');
 const projectDir = process.cwd();
 const distFolder = path.join(projectDir, 'dist');
 
+let userConfig = {};
+const configFile = path.join(projectDir, 'tarec.yml');
+
+if (fs.existsSync(configFile)) {
+  userConfig = yaml.safeLoad(fs.readFileSync(configFile, 'utf-8'));
+  console.log(userConfig);
+}
+
+const options = {
+  rootDir: rootDir,
+  projectDir: projectDir,
+  userConfig: userConfig
+};
+
 if (process.argv.length == 2) {
-  require('../tasks/start')({
-    rootDir: rootDir,
-    projectDir: projectDir
-  });
+  require('../tasks/start')(options);
 } else if (process.argv[2] == 'build') {
   require('../tasks/clean')(distFolder);
-  require('../tasks/build')({
-    rootDir: rootDir,
-    projectDir: projectDir
-  });
+  require('../tasks/build')(options);
 }

lib/loaders/babel.js

@@ -8,10 +8,24 @@ function findReact () {
   }
 }
 
+function getAliases (options) {
+  var aliases = options.userConfig.aliases;
+  if (!aliases) {
+    return [];
+  }
+  return aliases.map(alias => {
+    var aliasName = Object.keys(alias)[0];
+    return {
+      src: alias[aliasName],
+      expose: aliasName
+    }
+  });
+}
+
 const reactPath = findReact();
 
 module.exports = [
-  {
+  (options) => ({
     test: /\.js$/,
     loader: 'babel',
     exclude: /node_modules/,
@@ -34,10 +48,11 @@ module.exports = [
                 transform: require.resolve('react-transform-catch-errors'),
                 imports: [reactPath, require.resolve('redbox-noreact')]
               }]
-            }]
+            }],
+            [require.resolve("babel-plugin-module-alias"), getAliases(options)]
           ]
         }
       }
     }
-  }
+  })
 ];

lib/tasks/build.js

@@ -1,10 +1,7 @@
 const webpack = require('webpack');
 
 module.exports = function build(options) {
-  const config = require('../webpack/webpack.prod.config')({
-    rootDir: options.rootDir,
-    projectDir: options.projectDir
-  });
+  const config = require('../webpack/webpack.prod.config')(options);
 
   webpack(config, (error, stats) => {
     if (error) {

lib/tasks/start.js

@@ -8,10 +8,7 @@ const makeConfig = require('../webpack/webpack.dev.config');
 module.exports = function start (options) {
 
   const app = express();
-  const config = makeConfig({
-    rootDir: options.rootDir,
-    projectDir: options.projectDir
-  });
+  const config = makeConfig(options);
 
   const compiler = webpack(config);
   app.use(history());

lib/webpack/getLoaders.js

@@ -0,0 +1,12 @@
+module.exports = function getLoader (loadersObj, options) {
+  const loaders = Object.keys(loadersObj).reduce((p, k) => {
+    const loaders = loadersObj[k].map(l => {
+      if (typeof l === 'function') {
+        return l(options);
+      }
+      return l;
+    });
+    return p.concat(loaders);
+  }, []);
+  return loaders;
+};

lib/webpack/webpack.dev.config.js

@@ -2,9 +2,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const requireDir = require('require-dir');
 const path = require('path');
 const webpack = require('webpack');
+const getLoaders = require('./getLoaders');
 
 const allLoaders = Object.assign(requireDir('../loaders'), requireDir('../loaders/dev'));
-const loaders = Object.keys(allLoaders).reduce((p, k) => p.concat(allLoaders[k]), []);
 
 const env = 'development';
 const globals = {
@@ -16,6 +16,7 @@ const globals = {
 // https://gist.github.com/sokra/27b24881210b56bbaff7
 // http://www.2ality.com/2015/12/webpack-tree-shaking.html
 module.exports = function devConfig (options) {
+  const loaders = getLoaders(allLoaders, options);
   return {
     devtool: 'inline-source-map',
     entry: [

lib/webpack/webpack.prod.config.js

@@ -4,9 +4,9 @@ const requireDir = require('require-dir');
 const path = require('path');
 const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const getLoaders = require('./getLoaders');
 
 const allLoaders = Object.assign(requireDir('../loaders'), requireDir('../loaders/prod'));
-const loaders = Object.keys(allLoaders).reduce((p, k) => p.concat(allLoaders[k]), []);
 
 const env = 'production';
 const globals = {
@@ -18,6 +18,7 @@ const globals = {
 // https://gist.github.com/sokra/27b24881210b56bbaff7
 // http://www.2ality.com/2015/12/webpack-tree-shaking.html
 module.exports = function prodConfig (options) {
+  const loaders = getLoaders(allLoaders, options);
   return {
     devtool: 'source-map',
     entry: [

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "babel-core": "^6.7.7",
     "babel-loader": "^6.2.4",
+    "babel-plugin-module-alias": "^1.4.0",
     "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-runtime": "^6.7.5",
     "babel-preset-es2015-webpack": "^6.4.1",
@@ -28,6 +29,7 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "html-webpack-plugin": "^2.16.0",
     "http-proxy-middleware": "^0.14.0",
+    "js-yaml": "^3.6.0",
     "json-loader": "^0.5.4",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",