Skip to content

Commit f429d19

Browse files
danielcherubinidanielcherubini
committed
adds config extra options
1 parent 9444a75 commit f429d19

File tree

5 files changed

+215
-99
lines changed

5 files changed

+215
-99
lines changed

‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,24 @@ renderToStream returns a string from res.renderVue to the client
7272
end: '</div></body>'
7373
}
7474
},
75+
webpack: {
76+
/**
77+
* Webpack Server and Client Configs go here
78+
* Takes webpack configs and uses webpack-merge to merge them
79+
* */
80+
client: {},
81+
server: {}
82+
},
83+
vue: {
84+
/**
85+
* This is where you put the string versions of the
86+
* entry.js for server and client
87+
* app is for the app entry.js
88+
* */
89+
app: 'string',
90+
client: 'string',
91+
server: 'string',
92+
},
7593
head: {
7694
metas: [
7795
{

‎lib/renderer/renderer-webpack.js

+20-98
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ const Utils = require("../utils");
88
// @ts-ignore
99
const find = require("find");
1010
const mkdirp = require("mkdirp");
11-
const { VueLoaderPlugin } = require("vue-loader");
1211
const webpack = require("webpack");
1312
const MFS = require("memory-fs");
1413

@@ -43,6 +42,8 @@ const MFS = require("memory-fs");
4342
* @prop {String} vueVersion
4443
* @prop {(VueOptionsType|Object)} head
4544
* @prop {Object} data
45+
* @prop {{server: webpack.Configuration, client: webpack.Configuration}} webpack
46+
* @prop {Object} vue
4647
*/
4748

4849
class Renderer {
@@ -55,7 +56,8 @@ class Renderer {
5556
* @property {String} nodeModulesPath
5657
* @property {String} vueVersion
5758
* @prop {MFS} MFS
58-
* @prop {Object} webpackConfig
59+
* @prop {Object} webpackServerConfig
60+
* @prop {Object} webpackClientConfig
5961
*/
6062
constructor(options = {}) {
6163
this.cacheOptions = options.cacheOptions || {
@@ -74,77 +76,17 @@ class Renderer {
7476
this.rootPath = path.join(this.nodeModulesPath, "../");
7577
this.mfs = new MFS();
7678
this.mfs.mkdirpSync(this.rootPath);
77-
const productionMode = (!process.env.VUE_DEV || (process.env.VUE_DEV && process.env.VUE_DEV === "false")) ? "production" : "development";
78-
this.webpackServerConfig = {
79-
entry: "./src/entry-server.js",
80-
mode: productionMode,
81-
target: "node",
82-
output: {
83-
filename: "server.js",
84-
libraryTarget: "commonjs2",
85-
},
86-
module: {
87-
rules: [{
88-
test: /\.vue$/,
89-
loader: "vue-loader",
90-
},
91-
{
92-
test: /\.js$/,
93-
loader: "babel-loader",
94-
},
95-
{
96-
test: /\.css$/,
97-
use: [
98-
"vue-style-loader",
99-
"css-loader",
100-
],
101-
},
102-
],
103-
},
104-
resolve: {
105-
extensions: [
106-
".js",
107-
".vue",
108-
],
109-
},
110-
plugins: [
111-
new VueLoaderPlugin(),
112-
],
113-
};
114-
this.webpackClientConfig = {
115-
entry: "./src/entry-client.js",
116-
output: {
117-
filename: "client.js",
118-
},
119-
mode: productionMode,
120-
module: {
121-
rules: [{
122-
test: /\.vue$/,
123-
loader: "vue-loader",
124-
},
125-
{
126-
test: /\.js$/,
127-
loader: "babel-loader",
128-
},
129-
{
130-
test: /\.css$/,
131-
use: [
132-
"vue-style-loader",
133-
"css-loader",
134-
],
135-
},
136-
],
137-
},
138-
resolve: {
139-
extensions: [
140-
".js",
141-
".vue",
142-
],
143-
},
144-
plugins: [
145-
new VueLoaderPlugin(),
146-
],
147-
};
79+
const mode = (!process.env.VUE_DEV || (process.env.VUE_DEV && process.env.VUE_DEV === "false")) ? "production" : "development";
80+
const config = Utils.Config.Bootstrap(
81+
options.webpack ? options.webpack.client : {},
82+
options.webpack ? options.webpack.server : {},
83+
mode,
84+
);
85+
this.webpackServerConfig = config.server;
86+
this.webpackClientConfig = config.client;
87+
this.vue = options.vue ?
88+
{app: options.vue.app, server: options.vue.server, client: options.vue.client} :
89+
{app: undefined, server: undefined, client: undefined};
14890
}
14991
/**
15092
* @returns {Promise<boolean>}
@@ -185,31 +127,9 @@ class Renderer {
185127
*/
186128
async _buildConfig(filePath) {
187129
const parsedBundlePath = path.parse(filePath);
188-
const app = `import Vue from "vue";
189-
import App from "${filePath}";
190-
191-
export function createApp (data) {
192-
const app = new Vue({
193-
data,
194-
render: h => h(App)
195-
})
196-
return { app }
197-
}`;
198-
199-
const server = `import { createApp } from "./app"
200-
export default context => {
201-
return new Promise((resolve, reject) => {
202-
const { app } = createApp(context);
203-
204-
resolve(app);
205-
});
206-
};`;
207-
208-
const client = `import { createApp } from "./app"
209-
const store = window.__INITIAL_STATE__;
210-
const { app } = createApp(store ? store : {});
211-
app.$mount("#app")`;
212-
130+
const app = Utils.Config.AppConfig(filePath, this.vue.app);
131+
const server = Utils.Config.ServerConfig(this.vue.app);
132+
const client = Utils.Config.ClientConfig(this.vue.client);
213133
const parsedFilePath = filePath.replace(this.rootPath, "").replace(".vue", "");
214134
const configFolder = path.join(this.rootPath, ".expressvue", parsedFilePath);
215135
try {
@@ -238,11 +158,13 @@ class Renderer {
238158
webpackServerConfig.entry = entryPaths.server;
239159
// @ts-ignore
240160
webpackServerConfig.output.path = parsedBundlePath.dir;
161+
// @ts-ignore
241162
webpackServerConfig.output.filename = `${parsedBundlePath.base}.server.js`;
242163

243164
webpackClientConfig.entry = entryPaths.client;
244165
// @ts-ignore
245166
webpackClientConfig.output.path = "/expressvue/bundles";
167+
// @ts-ignore
246168
webpackClientConfig.output.filename = `${parsedBundlePath.base}.client.js`;
247169

248170
return {

‎lib/utils/config.js

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
const merge = require("webpack-merge");
2+
const {VueLoaderPlugin} = require("vue-loader");
3+
const webpack = require("webpack");
4+
/**
5+
*
6+
* @param {Object} serverConfig
7+
* @param {Object} clientConfig
8+
* @param {"development"|"production"} [mode]
9+
* @returns {{server: webpack.Configuration, client: webpack.Configuration}}
10+
*/
11+
module.exports.Bootstrap = function Bootstrap(serverConfig, clientConfig, mode) {
12+
const server = merge.smart({
13+
entry: "./src/entry-server.js",
14+
mode: mode,
15+
target: "node",
16+
output: {
17+
filename: "server.js",
18+
libraryTarget: "commonjs2",
19+
},
20+
module: {
21+
rules: [
22+
{
23+
test: /\.vue$/,
24+
loader: "vue-loader",
25+
},
26+
{
27+
test: /\.js$/,
28+
loader: "babel-loader",
29+
},
30+
{
31+
test: /\.css$/,
32+
use: [
33+
"vue-style-loader",
34+
"css-loader",
35+
],
36+
},
37+
],
38+
},
39+
resolve: {
40+
extensions: [
41+
".js",
42+
".vue",
43+
],
44+
},
45+
plugins: [
46+
new VueLoaderPlugin(),
47+
],
48+
}, serverConfig);
49+
50+
const client = merge.smart({
51+
entry: "./src/entry-client.js",
52+
output: {
53+
filename: "client.js",
54+
},
55+
mode: mode,
56+
module: {
57+
rules: [
58+
{
59+
test: /\.vue$/,
60+
loader: "vue-loader",
61+
},
62+
{
63+
test: /\.js$/,
64+
loader: "babel-loader",
65+
},
66+
{
67+
test: /\.css$/,
68+
use: [
69+
"vue-style-loader",
70+
"css-loader",
71+
],
72+
},
73+
],
74+
},
75+
resolve: {
76+
extensions: [
77+
".js",
78+
".vue",
79+
],
80+
},
81+
plugins: [
82+
new VueLoaderPlugin(),
83+
],
84+
}, clientConfig);
85+
86+
return {
87+
server,
88+
client,
89+
};
90+
};
91+
92+
/**
93+
* @param {String} filePath
94+
* @param {String} config
95+
* @returns {String}
96+
*/
97+
module.exports.AppConfig = function AppConfig(filePath, config) {
98+
if (config) {
99+
return config;
100+
}
101+
return `import Vue from "vue";
102+
import App from "${filePath}";
103+
104+
export function createApp(data) {
105+
const app = new Vue({
106+
data,
107+
render: h => h(App),
108+
});
109+
return { app };
110+
}
111+
`;
112+
};
113+
114+
/**
115+
* @param {String} config
116+
* @returns {String}
117+
*/
118+
module.exports.ServerConfig = function ServerConfig(config) {
119+
if (config) {
120+
return config;
121+
}
122+
return `import { createApp } from "./app";
123+
export default context => {
124+
return new Promise((resolve, reject) => {
125+
const { app } = createApp(context);
126+
127+
resolve(app);
128+
});
129+
};
130+
`;
131+
};
132+
133+
/**
134+
* @param {String} config
135+
* @returns {String}
136+
*/
137+
module.exports.ClientConfig = function ClientConfig(config) {
138+
if (config) {
139+
return config;
140+
}
141+
return `import { createApp } from "./app";
142+
const store = window.__INITIAL_STATE__;
143+
const { app } = createApp(store ? store : {});
144+
app.$mount("#app");
145+
`;
146+
};

‎lib/utils/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ module.exports.FindRootPath = require("./findPaths").FindRootPath;
1010
module.exports.FindNodeModules = require("./findPaths").FindNodeModules;
1111
module.exports.Cache = require("./cache");
1212
module.exports.PromiseFS = require("./promiseFS");
13+
module.exports.Config = require("./config");

‎tests/example/index-webpack.js

+30-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,36 @@ const axios = require("axios").default;
66

77
const evrOptions = {
88
pagesPath: path.normalize(path.join(__dirname, "views")),
9-
webpack: true,
9+
webpack: {
10+
server: {
11+
module: {
12+
rules: [
13+
{
14+
test: /\.js$/,
15+
loader: "babel-loader",
16+
options: {
17+
babelrc: false,
18+
presets: ["@babel/preset-env"],
19+
},
20+
},
21+
],
22+
},
23+
},
24+
client: {
25+
module: {
26+
rules: [
27+
{
28+
test: /\.js$/,
29+
loader: "babel-loader",
30+
options: {
31+
babelrc: false,
32+
presets: ["@babel/preset-env"],
33+
},
34+
},
35+
],
36+
},
37+
},
38+
},
1039
data: {
1140
foo: true,
1241
globalData: true,

0 commit comments

Comments
 (0)