bundlers/webpack

Author: tomlandau

.bit.map.json

@@ -247,5 +247,47 @@
         "mainFile": "src/bundlers/vue/index.js",
         "origin": "AUTHORED"
     },
-    "version": "0.12.6"
+    "bit.envs/bundlers/[email protected]": {
+        "files": [
+            {
+                "relativePath": "src/bundlers/webpack/index.js",
+                "test": false,
+                "name": "index.js"
+            },
+            {
+                "relativePath": "src/bundlers/webpack/readme.md",
+                "test": false,
+                "name": "readme.md"
+            },
+            {
+                "relativePath": "src/bundlers/webpack/webpack.config.js",
+                "test": false,
+                "name": "webpack.config.js"
+            }
+        ],
+        "mainFile": "src/bundlers/webpack/index.js",
+        "origin": "AUTHORED"
+    },
+    "bit.envs/bundlers/[email protected]": {
+        "files": [
+            {
+                "relativePath": "src/bundlers/webpack-css-modules/index.js",
+                "test": false,
+                "name": "index.js"
+            },
+            {
+                "relativePath": "src/bundlers/webpack-css-modules/readme.md",
+                "test": false,
+                "name": "readme.md"
+            },
+            {
+                "relativePath": "src/bundlers/webpack-css-modules/webpack.config.js",
+                "test": false,
+                "name": "webpack.config.js"
+            }
+        ],
+        "mainFile": "src/bundlers/webpack-css-modules/index.js",
+        "origin": "AUTHORED"
+    },
+    "version": "0.12.8-dev.1"
 }

package.json

@@ -57,14 +57,16 @@
     "sass-loader": "^6.0.6",
     "sinon": "^3.2.1",
     "sinon-chai": "^2.13.0",
+    "style-loader": "^0.20.2",
     "typescript": "^2.4.2",
     "uglifyjs-webpack-plugin": "^1.2.0",
     "vinyl": "^2.1.0",
     "vinyl-file": "^3.0.0",
     "vue-loader": "^14.1.1",
     "vue-style-loader": "^4.0.2",
     "vue-template-compiler": "^2.5.13",
-    "webpack": "^3.11.0",
+    "webpack": "^4.0.1",
     "webpack-node-externals": "^1.6.0"
-  }
+  },
+  "workspaces": []
 }

src/bundlers/webpack-css-modules/index.js

@@ -0,0 +1,67 @@
+import Vinyl from 'vinyl';
+import path from 'path';
+import webpack from 'webpack';
+import MemoryFS from 'memory-fs';
+import configure from './webpack.config';
+
+export const compile = (files, distPath, componentObject) => {
+    const mainFile = files.find(file => file.relative === componentObject.mainFile);
+    const testFiles = files.filter(file => file.test);  
+
+    return runWebpack(mainFile, testFiles, distPath);
+}
+
+const runWebpack = (mainFile, testFiles, distPath) => {
+    const conf = getConfig(mainFile, testFiles, distPath);
+    const compiler = webpack(conf);
+
+    const fs = new MemoryFS();
+    compiler.outputFileSystem = fs;
+
+    const compilationPromise = new Promise(function (resolve, reject) {
+        return compiler.run(function (err, stats) {
+            if (err || 0 < stats.compilation.errors.length) {
+                reject(err || stats.compilation.errors);
+                return;
+            }
+
+            resolve(stats.compilation.assets);
+        });
+    });
+
+    return compilationPromise.then((assets) => extractFiles(fs, mainFile, testFiles, distPath, assets));
+}
+
+const extractFiles = (fileSystem, mainFile, testFiles, distPath, assets) => {
+    const distPathFiles = fileSystem.readdirSync(distPath);
+
+    return Object.keys(assets).map(assetName => {
+        const asset = assets[assetName];
+        const distFullPath = asset.existsAt;
+        return new Vinyl({
+            contents: fileSystem.readFileSync(asset.existsAt),
+            base: distPath,
+            path: distFullPath,
+            basename: assetName,
+            test:testFiles.find(t => t.basename === assetName) ? true : false
+        });
+      });
+}
+
+const getConfig = (mainFile, testFiles, distPath) => {
+    const conf = configure();
+
+    const ext = {
+        context: __dirname,
+        output: {
+            path: path.join(distPath, path.dirname(mainFile.relative)),
+        },
+        entry: {
+            [mainFile.stem] : mainFile.path
+        }
+    };
+
+    testFiles.forEach(t => ext.entry[t.stem] = [t.path]);
+
+    return Object.assign(conf, ext);
+};

src/bundlers/webpack-css-modules/readme.md

@@ -0,0 +1,19 @@
+# Webpack bundler
+
+A component [compiler](https://docs.bitsrc.io/docs/ext-compiling.html) that bundles the component using [webpack](https://webpack.js.org/) v4.0.1.
+
+## What is bundled?
+The bundler bundles the component's main file and test files.
+In case there are component files that are not in those files' dependency trees, they won't be bundled. Note that this is in accordance with webpack's usual behavior, but not in accordance with the usual behavior of Bit compilers, which usually compile all the files.
+
+## How to use?
+ 
+ Import the environment.
+ ```bash
+  bit import bit.envs/bundlers/webpack -c
+ ```
+
+ Then build using [bit build](https://docs.bitsrc.io/docs/cli-build.html).
+ ```bash
+ bit build
+ ```

src/bundlers/webpack-css-modules/webpack.config.js

@@ -0,0 +1,69 @@
+const babelPresetLatest = require('babel-preset-latest');
+const babelPresetReact = require('babel-preset-react');
+
+//indirect 
+require('babel-loader');
+require('babel-core');
+require('style-loader');
+require('css-loader');
+require('sass-loader');
+require('node-sass');
+
+const nodeExternals = require('webpack-node-externals');
+const PACKAGE_TYPE = 'umd';
+
+const configure = () => {
+    return {
+        output: {
+            filename: '[name].js',
+            libraryTarget: PACKAGE_TYPE,
+        },
+        module: {
+            rules: [{
+                test: /.(js|jsx)$/,
+                loader: 'babel-loader',
+                options: {
+                    babelrc: false,
+                    presets: [babelPresetLatest, babelPresetReact]
+                }
+            }, {
+                test: /\.(scss|css)$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader", // translates CSS into CommonJS
+                    options: {
+                        import: true,
+                        modules: true,
+                    }
+                }, {
+                    loader: "sass-loader" // compiles Sass to CSS
+                }]
+            }, {
+                test: /\.less$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader", // translates CSS into CommonJS
+                    options: {
+                        import: true,
+                        modules: true,
+                    } 
+                }, {
+                    loader: "less-loader" // compiles Less to CSS
+                }]
+            },
+            // JSON is not enabled by default in Webpack but both Node and Browserify
+            // allow it implicitly so we also enable it.
+            {
+                test: /\.json$/,
+                loader: 'json-loader'
+            }]
+        },
+        externals: [ nodeExternals({
+            importType: PACKAGE_TYPE
+        }) ]
+    };
+};
+
+export default configure;

src/bundlers/webpack/index.js

@@ -0,0 +1,67 @@
+import Vinyl from 'vinyl';
+import path from 'path';
+import webpack from 'webpack';
+import MemoryFS from 'memory-fs';
+import configure from './webpack.config';
+
+export const compile = (files, distPath, componentObject) => {
+    const mainFile = files.find(file => file.relative === componentObject.mainFile);
+    const testFiles = files.filter(file => file.test);  
+
+    return runWebpack(mainFile, testFiles, distPath);
+}
+
+const runWebpack = (mainFile, testFiles, distPath) => {
+    const conf = getConfig(mainFile, testFiles, distPath);
+    const compiler = webpack(conf);
+
+    const fs = new MemoryFS();
+    compiler.outputFileSystem = fs;
+
+    const compilationPromise = new Promise(function (resolve, reject) {
+        return compiler.run(function (err, stats) {
+            if (err || 0 < stats.compilation.errors.length) {
+                reject(err || stats.compilation.errors);
+                return;
+            }
+
+            resolve(stats.compilation.assets);
+        });
+    });
+
+    return compilationPromise.then((assets) => extractFiles(fs, mainFile, testFiles, distPath, assets));
+}
+
+const extractFiles = (fileSystem, mainFile, testFiles, distPath, assets) => {
+    const distPathFiles = fileSystem.readdirSync(distPath);
+
+    return Object.keys(assets).map(assetName => {
+        const asset = assets[assetName];
+        const distFullPath = asset.existsAt;
+        return new Vinyl({
+            contents: fileSystem.readFileSync(asset.existsAt),
+            base: distPath,
+            path: distFullPath,
+            basename: assetName,
+            test:testFiles.find(t => t.basename === assetName) ? true : false
+        });
+      });
+}
+
+const getConfig = (mainFile, testFiles, distPath) => {
+    const conf = configure();
+
+    const ext = {
+        context: __dirname,
+        output: {
+            path: path.join(distPath, path.dirname(mainFile.relative)),
+        },
+        entry: {
+            [mainFile.stem] : mainFile.path
+        }
+    };
+
+    testFiles.forEach(t => ext.entry[t.stem] = [t.path]);
+
+    return Object.assign(conf, ext);
+};

src/bundlers/webpack/readme.md

@@ -0,0 +1,19 @@
+# Webpack bundler
+
+A component [compiler](https://docs.bitsrc.io/docs/ext-compiling.html) that bundles the component using [webpack](https://webpack.js.org/) v4.0.1.
+
+## What is bundled?
+The bundler bundles the component's main file and test files.
+In case there are component files that are not in those files' dependency trees, they won't be bundled. Note that this is in accordance with webpack's usual behavior, but not in accordance with the usual behavior of Bit compilers, which usually compile all the files.
+
+## How to use?
+ 
+ Import the environment.
+ ```bash
+  bit import bit.envs/bundlers/webpack -c
+ ```
+
+ Then build using [bit build](https://docs.bitsrc.io/docs/cli-build.html).
+ ```bash
+ bit build
+ ```

src/bundlers/webpack/webpack.config.js

@@ -0,0 +1,69 @@
+const babelPresetLatest = require('babel-preset-latest');
+const babelPresetReact = require('babel-preset-react');
+
+//indirect 
+require('babel-loader');
+require('babel-core');
+require('style-loader');
+require('css-loader');
+require('sass-loader');
+require('node-sass');
+
+const nodeExternals = require('webpack-node-externals');
+const PACKAGE_TYPE = 'umd';
+
+const configure = () => {
+    return {
+        output: {
+            filename: '[name].js',
+            libraryTarget: PACKAGE_TYPE,
+        },
+        module: {
+            rules: [{
+                test: /.(js|jsx)$/,
+                loader: 'babel-loader',
+                options: {
+                    babelrc: false,
+                    presets: [babelPresetLatest, babelPresetReact]
+                }
+            }, {
+                test: /\.(scss|css)$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader", // translates CSS into CommonJS
+                    options: {
+                        import: true,
+                        modules: false,
+                    }
+                }, {
+                    loader: "sass-loader" // compiles Sass to CSS
+                }]
+            }, {
+                test: /\.less$/,
+                use: [{
+                    loader: "style-loader" // creates style nodes from JS strings
+                }, {
+                    loader: "css-loader", // translates CSS into CommonJS
+                    options: {
+                        import: true,
+                        modules: false,
+                    } 
+                }, {
+                    loader: "less-loader" // compiles Less to CSS
+                }]
+            },
+            // JSON is not enabled by default in Webpack but both Node and Browserify
+            // allow it implicitly so we also enable it.
+            {
+                test: /\.json$/,
+                loader: 'json-loader'
+            }]
+        },
+        externals: [ nodeExternals({
+            importType: PACKAGE_TYPE
+        }) ]
+    };
+};
+
+export default configure;