Add NPM2 support. (#356)

* Add NPM2 support. With the use alot of require.resolve and defining the missing redux dependency. * Fix lint issues. * Update storybook-ui which is optimized for NPM2
storybookjs · Aug 5, 2016 · 0be9294 · 0be9294
1 parent 9f402a6
commit 0be9294
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 64 deletions.
diff --git a/dist/server/config.js b/dist/server/config.js
@@ -41,7 +41,7 @@ exports.default = function (configType, baseConfig, configDir) {
     var err = new Error('=> Create a storybook config file in "' + configDir + '/config.js".');
     throw err;
   }
-  config.entry.preview.push(storybookConfigPath);
+  config.entry.preview.push(require.resolve(storybookConfigPath));
 
   // Check whether addons.js file exists inside the storybook.
   // Load the default addons.js file if it's missing.

diff --git a/dist/server/config/babel.js b/dist/server/config/babel.js
@@ -17,24 +17,24 @@ module.exports = {
   cacheDirectory: true,
   presets: [
   // let, const, destructuring, classes, modules
-  'babel-preset-es2015',
+  require.resolve('babel-preset-es2015'),
   // exponentiation
-  'babel-preset-es2016',
+  require.resolve('babel-preset-es2016'),
   // JSX, Flow
-  'babel-preset-react'],
+  require.resolve('babel-preset-react')],
   plugins: [
   // function x(a, b, c,) { }
-  'babel-plugin-syntax-trailing-function-commas',
+  require.resolve('babel-plugin-syntax-trailing-function-commas'),
   // await fetch()
-  'babel-plugin-syntax-async-functions',
+  require.resolve('babel-plugin-syntax-async-functions'),
   // class { handleClick = () => { } }
-  'babel-plugin-transform-class-properties',
+  require.resolve('babel-plugin-transform-class-properties'),
   // { ...todo, completed: true }
-  'babel-plugin-transform-object-rest-spread',
+  require.resolve('babel-plugin-transform-object-rest-spread'),
   // function* () { yield 42; yield 43; }
-  'babel-plugin-transform-regenerator',
+  require.resolve('babel-plugin-transform-regenerator'),
   // Polyfills the runtime needed for async/await and generators
-  ['babel-plugin-transform-runtime', {
+  [require.resolve('babel-plugin-transform-runtime'), {
     helpers: false,
     polyfill: false,
     regenerator: true

diff --git a/dist/server/config/babel.prod.js b/dist/server/config/babel.prod.js
@@ -14,28 +14,28 @@ module.exports = {
   babelrc: false,
   presets: [
   // let, const, destructuring, classes, modules
-  'babel-preset-es2015',
+  require.resolve('babel-preset-es2015'),
   // exponentiation
-  'babel-preset-es2016',
+  require.resolve('babel-preset-es2016'),
   // JSX, Flow
-  'babel-preset-react'],
+  require.resolve('babel-preset-react')],
   plugins: [
   // function x(a, b, c,) { }
-  'babel-plugin-syntax-trailing-function-commas',
+  require.resolve('babel-plugin-syntax-trailing-function-commas'),
   // await fetch()
-  'babel-plugin-syntax-async-functions',
+  require.resolve('babel-plugin-syntax-async-functions'),
   // class { handleClick = () => { } }
-  'babel-plugin-transform-class-properties',
+  require.resolve('babel-plugin-transform-class-properties'),
   // { ...todo, completed: true }
-  'babel-plugin-transform-object-rest-spread',
+  require.resolve('babel-plugin-transform-object-rest-spread'),
   // function* () { yield 42; yield 43; }
-  'babel-plugin-transform-regenerator',
+  require.resolve('babel-plugin-transform-regenerator'),
   // Polyfills the runtime needed for async/await and generators
-  ['babel-plugin-transform-runtime', {
+  [require.resolve('babel-plugin-transform-runtime'), {
     helpers: false,
     polyfill: false,
     regenerator: true
   }],
   // Optimization: hoist JSX that never changes out of render()
-  'babel-plugin-transform-react-constant-elements']
+  require.resolve('babel-plugin-transform-react-constant-elements')]
 };
diff --git a/dist/server/config/defaults/webpack.config.js b/dist/server/config/defaults/webpack.config.js
@@ -18,22 +18,22 @@ module.exports = function (storybookBaseConfig) {
   newConfig.module.loaders = [].concat((0, _toConsumableArray3.default)(newConfig.module.loaders), [{
     test: /\.css?$/,
     include: _paths.includePaths,
-    loader: 'style!css!postcss'
+    loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('postcss-loader')]
   }, {
     test: /\.json$/,
     include: _paths.includePaths,
-    loader: 'json'
+    loader: require.resolve('json-loader')
   }, {
     test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
     include: _paths.includePaths,
-    loader: 'file',
+    loader: require.resolve('file-loader'),
     query: {
       name: 'static/media/[name].[ext]'
     }
   }, {
     test: /\.(mp4|webm)(\?.*)?$/,
     include: _paths.includePaths,
-    loader: 'url',
+    loader: require.resolve('url-loader'),
     query: {
       limit: 10000,
       name: 'static/media/[name].[ext]'
@@ -44,6 +44,15 @@ module.exports = function (storybookBaseConfig) {
     return [_autoprefixer2.default];
   };
 
+  newConfig.resolve = {
+    // These are the reasonable defaults supported by the Node ecosystem.
+    extensions: ['.js', '.json', ''],
+    alias: {
+      // This is to support NPM2
+      'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator')
+    }
+  };
+
   // Return the altered config
   return newConfig;
 };
diff --git a/dist/server/config/webpack.config.js b/dist/server/config/webpack.config.js
@@ -23,8 +23,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var config = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
-    manager: [_path2.default.resolve(__dirname, './polyfills'), _path2.default.resolve(__dirname, '../../client/manager')],
-    preview: [_path2.default.resolve(__dirname, './polyfills'), _path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client?noInfo=true']
+    manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
+    preview: [require.resolve('./polyfills'), require.resolve('./error_enhancements'), require.resolve('webpack-hot-middleware/client') + '?noInfo=true']
   },
   output: {
     path: _path2.default.join(__dirname, 'dist'),
@@ -35,7 +35,7 @@ var config = {
   module: {
     loaders: [{
       test: /\.jsx?$/,
-      loader: 'babel',
+      loader: require.resolve('babel-loader'),
       query: require('./babel.js'),
       include: _paths.includePaths,
       exclude: _paths.excludePaths

diff --git a/dist/server/config/webpack.config.prod.js b/dist/server/config/webpack.config.prod.js
@@ -45,7 +45,7 @@ var config = {
   module: {
     loaders: [{
       test: /\.jsx?$/,
-      loader: 'babel',
+      loader: require.resolve('babel-loader'),
       query: require('./babel.prod.js'),
       include: _paths.includePaths,
       exclude: _paths.excludePaths

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "@kadira/storybook-addon-actions": "^1.0.2",
     "@kadira/storybook-addon-links": "^1.0.0",
     "@kadira/storybook-addons": "^1.3.1",
-    "@kadira/storybook-ui": "^3.0.0",
+    "@kadira/storybook-ui": "^3.1.0",
+    "redux": "^3.5.2",
     "airbnb-js-shims": "^1.0.0",
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.11.4",
@@ -74,7 +75,6 @@
   "devDependencies": {
     "babel-cli": "^6.11.4",
     "babel-eslint": "^6.1.2",
-    "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-stage-0": "^6.5.0",
     "chai": "^3.5.0",
     "deep-equal": "^1.0.1",
@@ -94,9 +94,6 @@
     "sinon": "^1.17.3"
   },
   "main": "dist/client/index.js",
-  "engines": {
-    "npm": "^3.0.0"
-  },
   "bin": {
     "start-storybook": "./dist/server/index.js",
     "build-storybook": "./dist/server/build.js",

diff --git a/src/server/config.js b/src/server/config.js
@@ -79,7 +79,7 @@ export default function (configType, baseConfig, configDir) {
     const err = new Error(`=> Create a storybook config file in "${configDir}/config.js".`);
     throw err;
   }
-  config.entry.preview.push(storybookConfigPath);
+  config.entry.preview.push(require.resolve(storybookConfigPath));
 
   // Check whether addons.js file exists inside the storybook.
   // Load the default addons.js file if it's missing.

diff --git a/src/server/config/babel.js b/src/server/config/babel.js
@@ -15,25 +15,25 @@ module.exports = {
   cacheDirectory: true,
   presets: [
     // let, const, destructuring, classes, modules
-    'babel-preset-es2015',
+    require.resolve('babel-preset-es2015'),
     // exponentiation
-    'babel-preset-es2016',
+    require.resolve('babel-preset-es2016'),
     // JSX, Flow
-    'babel-preset-react',
+    require.resolve('babel-preset-react'),
   ],
   plugins: [
     // function x(a, b, c,) { }
-    'babel-plugin-syntax-trailing-function-commas',
+    require.resolve('babel-plugin-syntax-trailing-function-commas'),
     // await fetch()
-    'babel-plugin-syntax-async-functions',
+    require.resolve('babel-plugin-syntax-async-functions'),
     // class { handleClick = () => { } }
-    'babel-plugin-transform-class-properties',
+    require.resolve('babel-plugin-transform-class-properties'),
     // { ...todo, completed: true }
-    'babel-plugin-transform-object-rest-spread',
+    require.resolve('babel-plugin-transform-object-rest-spread'),
     // function* () { yield 42; yield 43; }
-    'babel-plugin-transform-regenerator',
+    require.resolve('babel-plugin-transform-regenerator'),
     // Polyfills the runtime needed for async/await and generators
-    ['babel-plugin-transform-runtime', {
+    [require.resolve('babel-plugin-transform-runtime'), {
       helpers: false,
       polyfill: false,
       regenerator: true,

diff --git a/src/server/config/babel.prod.js b/src/server/config/babel.prod.js
@@ -12,30 +12,30 @@ module.exports = {
   babelrc: false,
   presets: [
     // let, const, destructuring, classes, modules
-    'babel-preset-es2015',
+    require.resolve('babel-preset-es2015'),
     // exponentiation
-    'babel-preset-es2016',
+    require.resolve('babel-preset-es2016'),
     // JSX, Flow
-    'babel-preset-react',
+    require.resolve('babel-preset-react'),
   ],
   plugins: [
     // function x(a, b, c,) { }
-    'babel-plugin-syntax-trailing-function-commas',
+    require.resolve('babel-plugin-syntax-trailing-function-commas'),
     // await fetch()
-    'babel-plugin-syntax-async-functions',
+    require.resolve('babel-plugin-syntax-async-functions'),
     // class { handleClick = () => { } }
-    'babel-plugin-transform-class-properties',
+    require.resolve('babel-plugin-transform-class-properties'),
     // { ...todo, completed: true }
-    'babel-plugin-transform-object-rest-spread',
+    require.resolve('babel-plugin-transform-object-rest-spread'),
     // function* () { yield 42; yield 43; }
-    'babel-plugin-transform-regenerator',
+    require.resolve('babel-plugin-transform-regenerator'),
     // Polyfills the runtime needed for async/await and generators
-    ['babel-plugin-transform-runtime', {
+    [require.resolve('babel-plugin-transform-runtime'), {
       helpers: false,
       polyfill: false,
       regenerator: true,
     }],
     // Optimization: hoist JSX that never changes out of render()
-    'babel-plugin-transform-react-constant-elements',
+    require.resolve('babel-plugin-transform-react-constant-elements'),
   ],
 };
diff --git a/src/server/config/defaults/webpack.config.js b/src/server/config/defaults/webpack.config.js
@@ -9,25 +9,29 @@ module.exports = (storybookBaseConfig) => {
     {
       test: /\.css?$/,
       include: includePaths,
-      loader: 'style!css!postcss',
+      loaders: [
+        require.resolve('style-loader'),
+        require.resolve('css-loader'),
+        require.resolve('postcss-loader'),
+      ],
     },
     {
       test: /\.json$/,
       include: includePaths,
-      loader: 'json',
+      loader: require.resolve('json-loader'),
     },
     {
       test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
       include: includePaths,
-      loader: 'file',
+      loader: require.resolve('file-loader'),
       query: {
         name: 'static/media/[name].[ext]',
       },
     },
     {
       test: /\.(mp4|webm)(\?.*)?$/,
       include: includePaths,
-      loader: 'url',
+      loader: require.resolve('url-loader'),
       query: {
         limit: 10000,
         name: 'static/media/[name].[ext]',
@@ -39,6 +43,15 @@ module.exports = (storybookBaseConfig) => {
     return [autoprefixer];
   };
 
+  newConfig.resolve = {
+    // These are the reasonable defaults supported by the Node ecosystem.
+    extensions: ['.js', '.json', ''],
+    alias: {
+      // This is to support NPM2
+      'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
+    },
+  };
+
   // Return the altered config
   return newConfig;
 };
diff --git a/src/server/config/webpack.config.js b/src/server/config/webpack.config.js
@@ -7,13 +7,13 @@ const config = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
     manager: [
-      path.resolve(__dirname, './polyfills'),
-      path.resolve(__dirname, '../../client/manager'),
+      require.resolve('./polyfills'),
+      require.resolve('../../client/manager'),
     ],
     preview: [
-      path.resolve(__dirname, './polyfills'),
-      path.resolve(__dirname, './error_enhancements'),
-      'webpack-hot-middleware/client?noInfo=true',
+      require.resolve('./polyfills'),
+      require.resolve('./error_enhancements'),
+      `${require.resolve('webpack-hot-middleware/client')}?noInfo=true`,
     ],
   },
   output: {
@@ -30,7 +30,7 @@ const config = {
     loaders: [
       {
         test: /\.jsx?$/,
-        loader: 'babel',
+        loader: require.resolve('babel-loader'),
         query: require('./babel.js'),
         include: includePaths,
         exclude: excludePaths,

diff --git a/src/server/config/webpack.config.prod.js b/src/server/config/webpack.config.prod.js
@@ -42,7 +42,7 @@ const config = {
     loaders: [
       {
         test: /\.jsx?$/,
-        loader: 'babel',
+        loader: require.resolve('babel-loader'),
         query: require('./babel.prod.js'),
         include: includePaths,
         exclude: excludePaths,