Skip to content

Commit db9f318

Browse files
swashataswashata
committed
feat: create basics of @wpackio/scripts
Just the helpers for webpack. A lot to do.
1 parent 434c93f commit db9f318

File tree

14 files changed

+3051
-96
lines changed

14 files changed

+3051
-96
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## Project npm scope
66

7-
> `@wpw`
7+
> `@wpackio`
88
99
## 🚧👀This is just a preface and under development. Watch out!👀🚧
1010

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = api => {
77
targets: {
88
node: '8.9.0',
99
},
10-
modules: 'commonjs',
10+
modules: 'cjs',
1111
},
1212
],
1313
];

‎packages/scripts/.npmignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Logs
2+
logs
3+
*.log
4+
5+
# Runtime data
6+
pids
7+
*.pid
8+
*.seed
9+
10+
# Directory for instrumented libs generated by jscoverage/JSCover
11+
lib-cov
12+
13+
# Coverage directory used by tools like istanbul
14+
coverage
15+
16+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17+
.grunt
18+
19+
# node-waf configuration
20+
.lock-wscript
21+
22+
# Compiled binary addons (http://nodejs.org/api/addons.html)
23+
build/Release
24+
25+
# Dependency directory
26+
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27+
node_modules
28+
*.un~
29+
yarn.lock
30+
src
31+
flow-typed
32+
coverage
33+
decls
34+
examples

‎packages/scripts/PREFACE.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
## Things it need to do
2+
3+
- Load project config file from cli --project-config or `wpw.project.config.js` (if present) `process.cwd`.
4+
- Load environment config file from cli --server-config or `wpw.dev.config.js` (if present) from `process.cwd`.
5+
- DO NOT RELY ON `process.env.NODE_ENV`. Rather set it automatically depending on cli commands.
6+
- `start` - Start browsersync sever with webpack middleware.
7+
- `build` - Compile files.
8+
- `init` - Create a `wpw.dev.config.js` through asking some questions (only if the file is not present).
9+
- Also set `process.env.BABEL_ENV` so that `babel-loader` can play nice, (especially with the preset-react).
10+
11+
## Structure `wpw.project.config.js`
12+
13+
```js
14+
module.exports = {
15+
// Files we need to compile, and where to put
16+
files: [
17+
// If this has length === 1, then single compiler
18+
{
19+
entry: {
20+
// stuff
21+
},
22+
filename: '[name].js',
23+
path: path.resolve(__dirname, 'dist'),
24+
},
25+
// If has more length, then multi-compiler
26+
],
27+
// Project specific config
28+
// Needs react?
29+
hasReact: true,
30+
// Needs sass?
31+
hasSass: true,
32+
// Externals
33+
externals: {
34+
jquery: 'jQuery',
35+
},
36+
// Show overlay on development
37+
errorOverlay: true,
38+
// Auto optimization by webpack
39+
// Split all common chunks with default config
40+
// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
41+
// Won't hurt because we use PHP to automate loading
42+
optimizeSplitChunks: true,
43+
// Extra webpack config to be passed directly
44+
webpackConfig: false,
45+
};
46+
```
47+
48+
## Draft
49+
50+
Possible `package.json`
51+
52+
```json
53+
{
54+
"name": "@wpw/scripts",
55+
"version": "0.0.0",
56+
"description": "@wpws/scripts is a single dependency for using WordPress webpack script.",
57+
"main": "index.js",
58+
"repository": "https://github.com/swashata/wp-webpack-script",
59+
"author": "Swashata Ghosh",
60+
"license": "MIT",
61+
"private": false,
62+
"dependencies": {
63+
"@babel/core": "^7.1.0",
64+
"@babel/plugin-proposal-class-properties": "^7.1.0",
65+
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
66+
"@babel/preset-env": "^7.1.0",
67+
"@babel/preset-react": "^7.0.0",
68+
"autoprefixer": "^9.1.5",
69+
"babel-loader": "^8.0.2",
70+
"browser-sync": "^2.24.7",
71+
"clean-webpack-plugin": "^0.1.19",
72+
"cross-env": "^5.2.0",
73+
"css-loader": "^1.0.0",
74+
"mini-css-extract-plugin": "^0.4.3",
75+
"optimize-css-assets-webpack-plugin": "^5.0.1",
76+
"postcss-loader": "^3.0.0",
77+
"sass-loader": "^7.1.0",
78+
"style-loader": "^0.23.0",
79+
"uglifyjs-webpack-plugin": "^2.0.1",
80+
"webpack": "^4.19.1",
81+
"webpack-dev-middleware": "^3.3.0",
82+
"webpack-hot-middleware": "^2.24.0"
83+
},
84+
"publishConfig": {
85+
"access": "public"
86+
}
87+
}
88+
```

‎packages/scripts/README.md

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,39 @@
1-
## Draft
2-
3-
Possible `package.json`
4-
5-
```json
6-
{
7-
"name": "@wpw/scripts",
8-
"version": "0.0.0",
9-
"description": "@wpws/scripts is a single dependency for using WordPress webpack script.",
10-
"main": "index.js",
11-
"repository": "https://github.com/swashata/wp-webpack-script",
12-
"author": "Swashata Ghosh",
13-
"license": "MIT",
14-
"private": false,
15-
"dependencies": {
16-
"@babel/core": "^7.1.0",
17-
"@babel/plugin-proposal-class-properties": "^7.1.0",
18-
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
19-
"@babel/preset-env": "^7.1.0",
20-
"@babel/preset-react": "^7.0.0",
21-
"autoprefixer": "^9.1.5",
22-
"babel-loader": "^8.0.2",
23-
"browser-sync": "^2.24.7",
24-
"clean-webpack-plugin": "^0.1.19",
25-
"cross-env": "^5.2.0",
26-
"css-loader": "^1.0.0",
27-
"mini-css-extract-plugin": "^0.4.3",
28-
"optimize-css-assets-webpack-plugin": "^5.0.1",
29-
"postcss-loader": "^3.0.0",
30-
"sass-loader": "^7.1.0",
31-
"style-loader": "^0.23.0",
32-
"uglifyjs-webpack-plugin": "^2.0.1",
33-
"webpack": "^4.19.1",
34-
"webpack-dev-middleware": "^3.3.0",
35-
"webpack-hot-middleware": "^2.24.0"
36-
},
37-
"publishConfig": {
38-
"access": "public"
39-
}
40-
}
1+
# `@wpw/scripts`
2+
3+
Stub README
4+
5+
// TODO
6+
> Intro
7+
8+
## Installation
9+
10+
If using `yarn`
11+
12+
```bash
13+
yarn add @wpw/scripts
14+
```
15+
16+
or with `npm`
17+
18+
```bash
19+
npm i @wpw/scripts
4120
```
21+
22+
## Usage
23+
24+
// TODO
25+
> Usage instruction
26+
27+
## Configuration
28+
29+
// TODO
30+
> Configuration instruction
31+
32+
## Development
33+
34+
This package has the same `npm scripts` as this monorepo. These should be run
35+
using `lerna run <script>`. More information can be found under [CONTRIBUTION.md](../../CONTRIBUTION.md).
36+
37+
- `build`: Use babel to build for nodejs 8.6+. Files inside `src` are compiled and put under `lib`.
38+
- `prepare`: Run `build` after `yarn` and before `publish`.
39+
- `watch`: Watch for changes in `src` and build in `lib`.

‎packages/scripts/babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../babel.config.js');

‎packages/scripts/package.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "@wpw/scripts",
3+
"version": "0.0.1",
4+
"description": "Main single dependency of @wpw build tool.",
5+
"keywords": [
6+
"wordpress",
7+
"bundler",
8+
"webpack",
9+
"browser-sync",
10+
"wordpress-bundler"
11+
],
12+
"main": "lib/index.js",
13+
"repository": "https://github.com/swashata/wp-webpack-script",
14+
"homepage": "https://wpack.io",
15+
"author": "Swashata Ghosh &lt;swashata4u@gmail.com&gt; (https://swas.io)",
16+
"license": "MIT",
17+
"private": false,
18+
"dependencies": {
19+
"@babel/core": "^7.1.0",
20+
"autoprefixer": "^9.1.5",
21+
"babel-loader": "^8.0.2",
22+
"browser-sync": "^2.24.7",
23+
"clean-webpack-plugin": "^0.1.19",
24+
"cross-env": "^5.2.0",
25+
"css-loader": "^1.0.0",
26+
"mini-css-extract-plugin": "^0.4.3",
27+
"node-sass": "^4.9.3",
28+
"optimize-css-assets-webpack-plugin": "^5.0.1",
29+
"postcss-loader": "^3.0.0",
30+
"sass-loader": "^7.1.0",
31+
"style-loader": "^0.23.0",
32+
"uglifyjs-webpack-plugin": "^2.0.1",
33+
"webpack": "^4.19.1",
34+
"webpack-dev-middleware": "^3.3.0",
35+
"webpack-hot-middleware": "^2.24.0",
36+
"webpack-merge": "^4.1.4"
37+
},
38+
"engines": {
39+
"node": ">=8.9.0"
40+
},
41+
"files": [
42+
"lib"
43+
],
44+
"scripts": {
45+
"build": "babel src --out-dir lib --ignore **/__tests__",
46+
"prepare": "cross-env NODE_ENV=production yarn build",
47+
"watch": "babel -w src --out-dir lib --ignore **/__tests__"
48+
},
49+
"publishConfig": {
50+
"access": "public"
51+
}
52+
}

‎packages/scripts/src/config/getModule.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
2+
3+
const getModule = ({ hasReact = true, hasSass = true, isDev = true }) => {
4+
// create the babel rules
5+
const babelRules = {
6+
test: /\.m?jsx?$/,
7+
use: ['babel-loader'],
8+
exclude: /(node_modules|bower_components)/,
9+
options: {
10+
presets: ['@wpw/base'],
11+
},
12+
};
13+
if (hasReact) {
14+
babelRules.presets.push('@wpw/react');
15+
}
16+
// Create style rules
17+
const styleRules = {
18+
test: /\.css$/,
19+
use: [
20+
isDev
21+
? 'style-loader'
22+
: {
23+
loader: MiniCssExtractPlugin.loader,
24+
options: {
25+
sourceMap: true,
26+
},
27+
},
28+
{
29+
loader: 'css-loader',
30+
options: {
31+
importLoaders: 1,
32+
sourceMap: true,
33+
},
34+
},
35+
'postcss-loader',
36+
],
37+
};
38+
// If we have sass, then add the stuff
39+
if (hasSass) {
40+
styleRules.test = /\.(sa|sc|c)ss$/;
41+
styleRules.use.push({
42+
loader: 'sass-loader',
43+
options: {
44+
sourceMap: true,
45+
},
46+
});
47+
}
48+
// create file rules
49+
const fileRules = {
50+
test: /\.(woff|woff2|eot|ttf|otf|svg|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
51+
use: [
52+
{
53+
loader: 'file-loader',
54+
options: {
55+
name: 'asset-[hash].[ext]',
56+
outputPath: 'assets/',
57+
},
58+
},
59+
],
60+
};
61+
62+
return {
63+
rules: [babelRules, styleRules, fileRules],
64+
};
65+
};
66+
67+
export default getModule;

0 commit comments

Comments
 (0)