Skip to content

Commit 3b0a7c3

Browse files
author
Ahmad Awais
committed
👌 IMPROVE: Path resolution
1 parent 31cbc88 commit 3b0a7c3

9 files changed

Lines changed: 346 additions & 47 deletions

File tree

packages/cgb-scripts/todo/.babelrc renamed to packages/cgb-scripts/eject/.babelrc

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,26 @@
1919
]
2020
],
2121
"plugins": [
22+
["transform-object-rest-spread"],
23+
[
24+
"transform-object-rest-spread",
25+
{
26+
"useBuiltIns": true
27+
}
28+
],
2229
[
2330
"transform-react-jsx",
2431
{
2532
"pragma": "wp.element.createElement"
2633
}
34+
],
35+
[
36+
"transform-runtime",
37+
{
38+
"helpers": false,
39+
"polyfill": false,
40+
"regenerator": true
41+
}
2742
]
2843
]
2944
}

‎packages/cgb-scripts/eject/paths.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Paths
3+
*
4+
* Project related paths.
5+
*/
6+
7+
const path = require( 'path' );
8+
const fs = require( 'fs' );
9+
10+
// Make sure any symlinks in the project folder are resolved:
11+
const pluginDir = fs.realpathSync( process.cwd() );
12+
const resolveApp = relativePath => path.resolve( pluginDir, relativePath );
13+
14+
module.exports = {
15+
dotenv: resolveApp( '.env' ),
16+
pluginBlocksJs: resolveApp( 'src/blocks.js' ),
17+
pluginDist: resolveApp( '.' ), // We are in ./dist folder already so the path '.' resolves to ./dist/.
18+
};

‎packages/cgb-scripts/eject/webpack.config.dev.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/**
2+
* Webpack Configuration
3+
*
4+
* Working of a Webpack can be very simple or complex. This is an intenally simple
5+
* build configuration.
6+
*
7+
* Webpack basics — If you are new the Webpack here's all you need to know:
8+
* 1. Webpack is a module bundler. It bundles different JS modules together.
9+
* 2. It needs and entry point and an ouput to process file(s) and bundle them.
10+
* 3. By default it only understands common JavaScript but you can make it
11+
* understand other formats by way of adding a Webpack loader.
12+
* 4. In the file below you will find an entry point, an ouput, and a babel-loader
13+
* that tests all .js files excluding the ones in node_modules to process the
14+
* ESNext and make it compatible with older browsers i.e. it converts the
15+
* ESNext (new standards of JavaScript) into old JavaScript through a loader
16+
* by Babel.
17+
*
18+
* TODO: Instructions.
19+
*
20+
* @since 1.0.0
21+
*/
22+
23+
// const path = require( 'path' );
24+
const autoprefixer = require( 'autoprefixer' );
25+
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
26+
const paths = require( './paths' );
27+
28+
// Extract style.css for both editor and frontend styles.
29+
const blocksCSSPlugin = new ExtractTextPlugin( {
30+
filename: './dist/blocks.style.build.css',
31+
} );
32+
33+
// Extract editor.css for editor styles.
34+
const editBlocksCSSPlugin = new ExtractTextPlugin( {
35+
filename: './dist/blocks.editor.build.css',
36+
} );
37+
38+
// Configuration for the ExtractTextPlugin — DRY rule.
39+
const extractConfig = {
40+
use: [
41+
// "postcss" loader applies autoprefixer to our CSS.
42+
{ loader: 'raw-loader' },
43+
{
44+
loader: 'postcss-loader',
45+
options: {
46+
ident: 'postcss',
47+
plugins: [
48+
autoprefixer( {
49+
browsers: [
50+
'>1%',
51+
'last 4 versions',
52+
'Firefox ESR',
53+
'not ie < 9', // React doesn't support IE8 anyway
54+
],
55+
flexbox: 'no-2009',
56+
} ),
57+
],
58+
},
59+
},
60+
// "sass" loader converst SCSS to CSS.
61+
{
62+
loader: 'sass-loader',
63+
options: {
64+
// Add common CSS file for variables and mixins.
65+
data: '@import "./src/common.scss";\n',
66+
outputStyle: 'nested',
67+
},
68+
},
69+
],
70+
};
71+
72+
// Export configuration.
73+
module.exports = {
74+
entry: {
75+
// './dist/blocks.build': './src/blocks.js', // 'name' : 'path/file.ext'.
76+
'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
77+
},
78+
output: {
79+
// Add /* filename */ comments to generated require()s in the output.
80+
pathinfo: true,
81+
// path: path.resolve( __dirname ),
82+
// The dist folder.
83+
path: paths.pluginDist,
84+
filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
85+
},
86+
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
87+
devtool: 'cheap-eval-source-map',
88+
module: {
89+
rules: [
90+
{
91+
test: /\.(js|jsx|mjs)$/,
92+
exclude: /(node_modules|bower_components)/,
93+
use: {
94+
loader: 'babel-loader',
95+
options: {
96+
babelrc: false,
97+
presets: [ require.resolve( 'babel-preset-cgb' ) ],
98+
// This is a feature of `babel-loader` for webpack (not Babel itself).
99+
// It enables caching results in ./node_modules/.cache/babel-loader/
100+
// directory for faster rebuilds.
101+
cacheDirectory: true,
102+
},
103+
},
104+
},
105+
{
106+
test: /style\.s?css$/,
107+
exclude: /(node_modules|bower_components)/,
108+
use: blocksCSSPlugin.extract( extractConfig ),
109+
},
110+
{
111+
test: /editor\.s?css$/,
112+
exclude: /(node_modules|bower_components)/,
113+
use: editBlocksCSSPlugin.extract( extractConfig ),
114+
},
115+
],
116+
},
117+
// Add plugins.
118+
plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ],
119+
stats: 'minimal',
120+
// stats: 'errors-only',
121+
};

‎packages/cgb-scripts/eject/webpack.config.prod.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/**
2+
* Webpack Configuration
3+
*
4+
* Working of a Webpack can be very simple or complex. This is an intenally simple
5+
* build configuration.
6+
*
7+
* Webpack basics — If you are new the Webpack here's all you need to know:
8+
* 1. Webpack is a module bundler. It bundles different JS modules together.
9+
* 2. It needs and entry point and an ouput to process file(s) and bundle them.
10+
* 3. By default it only understands common JavaScript but you can make it
11+
* understand other formats by way of adding a Webpack loader.
12+
* 4. In the file below you will find an entry point, an ouput, and a babel-loader
13+
* that tests all .js files excluding the ones in node_modules to process the
14+
* ESNext and make it compatible with older browsers i.e. it converts the
15+
* ESNext (new standards of JavaScript) into old JavaScript through a loader
16+
* by Babel.
17+
*
18+
* TODO: Instructions.
19+
*
20+
* @since 1.0.0
21+
*/
22+
23+
// const path = require( 'path' );
24+
const autoprefixer = require( 'autoprefixer' );
25+
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
26+
const paths = require( './paths' );
27+
28+
// Extract style.css for both editor and frontend styles.
29+
const blocksCSSPlugin = new ExtractTextPlugin( {
30+
filename: './dist/blocks.style.build.css',
31+
} );
32+
33+
// Extract editor.css for editor styles.
34+
const editBlocksCSSPlugin = new ExtractTextPlugin( {
35+
filename: './dist/blocks.editor.build.css',
36+
} );
37+
38+
// Configuration for the ExtractTextPlugin — DRY rule.
39+
const extractConfig = {
40+
use: [
41+
// "postcss" loader applies autoprefixer to our CSS.
42+
{ loader: 'raw-loader' },
43+
{
44+
loader: 'postcss-loader',
45+
options: {
46+
ident: 'postcss',
47+
plugins: [
48+
autoprefixer( {
49+
browsers: [
50+
'>1%',
51+
'last 4 versions',
52+
'Firefox ESR',
53+
'not ie < 9', // React doesn't support IE8 anyway
54+
],
55+
flexbox: 'no-2009',
56+
} ),
57+
],
58+
},
59+
},
60+
// "sass" loader converst SCSS to CSS.
61+
{
62+
loader: 'sass-loader',
63+
options: {
64+
// Add common CSS file for variables and mixins.
65+
data: '@import "./src/common.scss";\n',
66+
outputStyle: 'compressed',
67+
},
68+
},
69+
],
70+
};
71+
72+
// Export configuration.
73+
module.exports = {
74+
entry: {
75+
// './dist/blocks.build': './src/blocks.js', // 'name' : 'path/file.ext'.
76+
'./dist/blocks.build': paths.pluginBlocksJs, // 'name' : 'path/file.ext'.
77+
},
78+
output: {
79+
// Add /* filename */ comments to generated require()s in the output.
80+
pathinfo: true,
81+
// path: path.resolve( __dirname ),
82+
// The dist folder.
83+
path: paths.pluginDist,
84+
filename: '[name].js', // [name] = './dist/blocks.build' as defined above.
85+
},
86+
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
87+
devtool: 'cheap-eval-source-map',
88+
module: {
89+
rules: [
90+
{
91+
test: /\.(js|jsx|mjs)$/,
92+
exclude: /(node_modules|bower_components)/,
93+
use: {
94+
loader: 'babel-loader',
95+
options: {
96+
babelrc: false,
97+
presets: [ require.resolve( 'babel-preset-cgb' ) ],
98+
// This is a feature of `babel-loader` for webpack (not Babel itself).
99+
// It enables caching results in ./node_modules/.cache/babel-loader/
100+
// directory for faster rebuilds.
101+
cacheDirectory: true,
102+
},
103+
},
104+
},
105+
{
106+
test: /style\.s?css$/,
107+
exclude: /(node_modules|bower_components)/,
108+
use: blocksCSSPlugin.extract( extractConfig ),
109+
},
110+
{
111+
test: /editor\.s?css$/,
112+
exclude: /(node_modules|bower_components)/,
113+
use: editBlocksCSSPlugin.extract( extractConfig ),
114+
},
115+
],
116+
},
117+
// Add plugins.
118+
plugins: [ blocksCSSPlugin, editBlocksCSSPlugin ],
119+
stats: 'minimal',
120+
// stats: 'errors-only',
121+
};

‎packages/cgb-scripts/package.json‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
11
{
2-
"name": "cgb-scripts",
3-
"version": "0.1.0",
4-
"description": "Configuration and scripts for Create Guten Blocks.",
5-
"repository": "ahmadawais/create-guten-block",
6-
"license": "MIT",
7-
"engines": {
8-
"node": ">=6"
9-
},
10-
"bugs": {
11-
"url": "https://github.com/ahmadawais/create-guten-block/issues"
12-
},
13-
"bin": {
14-
"cgb-scripts": "./bin/cgb-scripts.js"
15-
},
16-
"dependencies": {
17-
"autoprefixer": "^7.2.4",
18-
"babel-core": "^6.25.0",
19-
"babel-eslint": "^8.2.1",
20-
"babel-loader": "^7.1.1",
21-
"babel-preset-cgb": "^0.0.4",
22-
"cgb-dev-utils": "^0.0.6",
23-
"chalk": "2.3.0",
24-
"cross-env": "^5.0.1",
25-
"eslint": "^4.15.0",
26-
"eslint-config-wordpress": "^2.0.0",
27-
"eslint-plugin-jest": "^21.6.1",
28-
"eslint-plugin-jsx-a11y": "^6.0.3",
29-
"eslint-plugin-react": "^7.5.1",
30-
"eslint-plugin-wordpress": "^0.1.0",
31-
"extract-text-webpack-plugin": "^3.0.2",
32-
"node-sass": "^4.7.2",
33-
"ora": "^1.3.0",
34-
"postcss-loader": "^2.0.10",
35-
"raw-loader": "^0.5.1",
36-
"sass-loader": "^6.0.6",
37-
"style-loader": "^0.19.1",
38-
"webpack": "^3.1.0"
39-
}
2+
"name": "cgb-scripts",
3+
"version": "0.1.0",
4+
"description": "Configuration and scripts for Create Guten Blocks.",
5+
"repository": "ahmadawais/create-guten-block",
6+
"license": "MIT",
7+
"engines": {
8+
"node": ">=6"
9+
},
10+
"bugs": {
11+
"url": "https://github.com/ahmadawais/create-guten-block/issues"
12+
},
13+
"bin": {
14+
"cgb-scripts": "./bin/cgb-scripts.js"
15+
},
16+
"dependencies": {
17+
"autoprefixer": "^7.2.4",
18+
"babel-core": "^6.25.0",
19+
"babel-eslint": "^8.2.1",
20+
"babel-loader": "^7.1.1",
21+
"babel-preset-cgb": "^0.0.4",
22+
"cgb-dev-utils": "^0.0.6",
23+
"chalk": "2.3.0",
24+
"cross-env": "^5.0.1",
25+
"eslint": "^4.15.0",
26+
"eslint-config-wordpress": "^2.0.0",
27+
"eslint-plugin-jest": "^21.6.1",
28+
"eslint-plugin-jsx-a11y": "^6.0.3",
29+
"eslint-plugin-react": "^7.5.1",
30+
"eslint-plugin-wordpress": "^0.1.0",
31+
"extract-text-webpack-plugin": "^3.0.2",
32+
"node-sass": "^4.7.2",
33+
"ora": "^1.3.0",
34+
"postcss-loader": "^2.0.10",
35+
"raw-loader": "^0.5.1",
36+
"sass-loader": "^6.0.6",
37+
"style-loader": "^0.19.1",
38+
"webpack": "^3.1.0",
39+
"resolve-pkg": "^1.0.0"
40+
}
4041
}

0 commit comments

Comments
 (0)