javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use chained configs internally

Browse Source
This commit is contained in:
Igor Randjelovic
2020-11-14 15:23:44 +01:00
parent 9dd5471d6d
commit 2be179a8d0
10 changed files with 102 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap
View File

@ -3,9 +3,7 @@
exports[`vue configuration works 1`] = `
Object {
"entry": Object {
"bundle.js": Array [
"bundle.js",
],
"": Array [],
},
"module": Object {
"rules": Array [
@ -20,6 +18,29 @@ Object {
},
],
},
Object {
"use": Array [
Object {
"loader": "ts-loader",
"options": Object {
"appendTsSuffixTo": Array [
/\\\\\\.vue\\$/,
],
},
},
],
},
],
},
"plugins": Array [
VueLoaderPlugin {},
],
"resolve": Object {
"alias": Object {
"vue": "nativescript-vue",
},
"extensions": Array [
".vue",
],
},
}

1
packages/webpack5/package.json
View File

@ -16,6 +16,7 @@
"webpack": "^5.4.0"
},
"dependencies": {
"vue-loader": "^15.9.5",
"webpack-chain": "^6.5.1"
}
}

6
packages/webpack5/src/configuration/angular.ts
View File

@ -1,8 +1,10 @@
import base from './base';
import { IWebpackEnv } from '@nativescript/webpack';
import Config from 'webpack-chain';
// todo: add base configuration for angular
export default function (env) {
export default function (env: IWebpackEnv): Config {
const config = base(env);
return {};
return config;
}

14
packages/webpack5/src/configuration/base.ts
View File

@ -1,13 +1,9 @@
import { Configuration } from 'webpack';
import Config from 'webpack-chain';
import { IWebpackEnv } from './index';
// todo: add base configuration that's shared across all flavors
export default function (env): Configuration {
const config = new Config()
config.entry('')
return {
entry: {
'bundle.js': 'bundle.js',
},
};
export default function (env: IWebpackEnv): Config {
const config = new Config();
config.entry('');
return config;
}

32
packages/webpack5/src/configuration/index.ts
View File

@ -1,7 +1,25 @@
export { default as angularConfig } from './angular';
export { default as baseConfig } from './base';
export { default as javascriptConfig } from './javascript';
export { default as reactConfig } from './react';
export { default as svelteConfig } from './svelte';
export { default as typescriptConfig } from './typescript';
export { default as vueConfig } from './vue';
import base from './base';
import angular from './angular';
import javascript from './javascript';
import react from './react';
import svelte from './svelte';
import typescript from './typescript';
import vue from './vue';
// export final configs
// todo: perhaps we can export chain configs as well
export const baseConfig = (env) => base(env).toConfig();
export const angularConfig = (env) => angular(env).toConfig();
export const javascriptConfig = (env) => javascript(env).toConfig();
export const reactConfig = (env) => react(env).toConfig();
export const svelteConfig = (env) => svelte(env).toConfig();
export const typescriptConfig = (env) => typescript(env).toConfig();
export const vueConfig = (env) => vue(env).toConfig();
export interface IWebpackEnv {
hmr: boolean;
// todo: add others
}

6
packages/webpack5/src/configuration/javascript.ts
View File

@ -1,8 +1,10 @@
import base from './base';
import { IWebpackEnv } from '@nativescript/webpack';
import Config from 'webpack-chain';
// todo: add base configuration for core
export default function (env) {
export default function (env: IWebpackEnv): Config {
const config = base(env);
return {};
return config;
}

6
packages/webpack5/src/configuration/react.ts
View File

@ -1,8 +1,10 @@
import base from './base';
import { IWebpackEnv } from '@nativescript/webpack';
import Config from 'webpack-chain';
// todo: add base configuration for react
export default function (env) {
export default function (env: IWebpackEnv): Config {
const config = base(env);
return {};
return config;
}

6
packages/webpack5/src/configuration/svelte.ts
View File

@ -1,8 +1,10 @@
import base from './base';
import { IWebpackEnv } from '@nativescript/webpack';
import Config from 'webpack-chain';
// todo: add base configuration for svelte
export default function (env) {
export default function (env: IWebpackEnv): Config {
const config = base(env);
return {};
return config;
}

6
packages/webpack5/src/configuration/typescript.ts
View File

@ -1,8 +1,10 @@
import base from './base';
import { IWebpackEnv } from '@nativescript/webpack';
import Config from 'webpack-chain';
// todo: add base configuration for core
export default function (env) {
export default function (env: IWebpackEnv): Config {
const config = base(env);
return {};
return config;
}

37
packages/webpack5/src/configuration/vue.ts
View File

@ -1,10 +1,16 @@
import base from './base';
import { default as Config } from 'webpack-chain';
import Config from 'webpack-chain';
import { VueLoaderPlugin } from 'vue-loader';
import { IWebpackEnv } from './index';
// todo: add base configuration for vue
export default function (env) {
const config = new Config().merge(base(env));
export default function (env: IWebpackEnv): Config {
const config = base(env);
// resolve .vue files
config.resolve.extensions.prepend('.vue');
// add a rule for .vue files
config.module
.rule('vue')
.test(/\.vue$/)
@ -18,14 +24,23 @@ export default function (env) {
})
.end();
// todo: we may want to use webpack-chain internally
// to avoid "trying to read property x of undefined" type of issues
/*
config.module.rules.push({
test: /.vue$/,
use: [],
// set up ts support in vue files
config.module
.rule('ts')
.use('ts-loader')
.loader('ts-loader')
.tap((options) => {
return {
...options,
appendTsSuffixTo: [/\.vue$/],
};
});
*/
return config.toConfig();
// add VueLoaderPlugin
config.plugin('vue-plugin').use(VueLoaderPlugin);
// add an alias for vue, since some plugins may try to import it
config.resolve.alias.set('vue', 'nativescript-vue');
return config;
}