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

chore: more base configuration

Browse Source
This commit is contained in:
Igor Randjelovic
2020-11-17 14:49:36 +01:00
parent b22e1c2361
commit bea55474df
7 changed files with 328 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`vue configuration [android] works 1`] = `
exports[`vue configuration for android 1`] = `
"{
resolve: {
symlinks: true,
@ -14,8 +14,74 @@ exports[`vue configuration [android] works 1`] = `
'.vue'
]
},
resolveLoader: {
modules: [
'@nativescript/webpack/loaders',
'node_modules'
]
},
module: {
rules: [
/* config.module.rule('ts') */
{
test: /\\\\.ts$/,
use: [
/* config.module.rule('ts').use('ts-loader') */
{
loader: 'ts-loader',
options: {
transpileOnly: true,
allowTsInNodeModules: true,
compilerOptions: {
sourceMap: true,
declaration: false
},
getCustomTransformers: function () { /* omitted long function */ },
appendTsSuffixTo: [
'\\\\\\\\.vue$'
]
}
}
]
},
/* config.module.rule('js') */
{
test: /\\\\.js$/,
use: [
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
},
/* config.module.rule('css') */
{
test: /\\\\.css$/,
use: [
/* config.module.rule('css').use('css2json-loader') */
{
loader: 'css2json-loader'
},
/* config.module.rule('css').use('css-loader') */
{
loader: 'css-loader'
}
]
},
/* config.module.rule('scss') */
{
test: /\\\\.scss$/,
use: [
/* config.module.rule('scss').use('css2json-loader') */
{
loader: 'css2json-loader'
},
/* config.module.rule('scss').use('scss-loader') */
{
loader: 'scss-loader'
}
]
},
/* config.module.rule('vue') */
{
test: /\\\\.vue$/,
@ -28,20 +94,6 @@ exports[`vue configuration [android] works 1`] = `
}
}
]
},
/* config.module.rule('ts') */
{
use: [
/* config.module.rule('ts').use('ts-loader') */
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [
/\\\\.vue$/
]
}
}
]
}
]
},
@ -55,7 +107,24 @@ exports[`vue configuration [android] works 1`] = `
verbose: true
}
),
/* config.plugin('vue-plugin') */
/* config.plugin('define') */
new DefinePlugin(
{
'global.NS_WEBPACK': true,
'global.isAndroid': true,
'global.isIOS': false,
process: 'global.process'
}
),
/* config.plugin('copy') */
new CopyPluginTemp(
{
patterns: []
}
),
/* config.plugin('watch-state-logger') */
new WatchStateLoggerPlugin(),
/* config.plugin('vue') */
new VueLoaderPlugin()
],
entry: {
@ -66,7 +135,7 @@ exports[`vue configuration [android] works 1`] = `
}"
`;
exports[`vue configuration [ios] works 1`] = `
exports[`vue configuration for ios 1`] = `
"{
resolve: {
symlinks: true,
@ -80,8 +149,74 @@ exports[`vue configuration [ios] works 1`] = `
'.vue'
]
},
resolveLoader: {
modules: [
'@nativescript/webpack/loaders',
'node_modules'
]
},
module: {
rules: [
/* config.module.rule('ts') */
{
test: /\\\\.ts$/,
use: [
/* config.module.rule('ts').use('ts-loader') */
{
loader: 'ts-loader',
options: {
transpileOnly: true,
allowTsInNodeModules: true,
compilerOptions: {
sourceMap: true,
declaration: false
},
getCustomTransformers: function () { /* omitted long function */ },
appendTsSuffixTo: [
'\\\\\\\\.vue$'
]
}
}
]
},
/* config.module.rule('js') */
{
test: /\\\\.js$/,
use: [
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
},
/* config.module.rule('css') */
{
test: /\\\\.css$/,
use: [
/* config.module.rule('css').use('css2json-loader') */
{
loader: 'css2json-loader'
},
/* config.module.rule('css').use('css-loader') */
{
loader: 'css-loader'
}
]
},
/* config.module.rule('scss') */
{
test: /\\\\.scss$/,
use: [
/* config.module.rule('scss').use('css2json-loader') */
{
loader: 'css2json-loader'
},
/* config.module.rule('scss').use('scss-loader') */
{
loader: 'scss-loader'
}
]
},
/* config.module.rule('vue') */
{
test: /\\\\.vue$/,
@ -94,20 +229,6 @@ exports[`vue configuration [ios] works 1`] = `
}
}
]
},
/* config.module.rule('ts') */
{
use: [
/* config.module.rule('ts').use('ts-loader') */
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [
/\\\\.vue$/
]
}
}
]
}
]
},
@ -121,7 +242,24 @@ exports[`vue configuration [ios] works 1`] = `
verbose: true
}
),
/* config.plugin('vue-plugin') */
/* config.plugin('define') */
new DefinePlugin(
{
'global.NS_WEBPACK': true,
'global.isAndroid': false,
'global.isIOS': true,
process: 'global.process'
}
),
/* config.plugin('copy') */
new CopyPluginTemp(
{
patterns: []
}
),
/* config.plugin('watch-state-logger') */
new WatchStateLoggerPlugin(),
/* config.plugin('vue') */
new VueLoaderPlugin()
],
entry: {

8
packages/webpack5/__tests__/configuration/vue.spec.ts
View File

@ -1,10 +1,16 @@
import { __vue } from '@nativescript/webpack';
// todo: maybe mock baseConfig as we test it separately?
// import Config from 'webpack-chain'
// jest.mock('../../src/configuration/base', () => () => {
// return new Config()
// })
describe('vue configuration', () => {
const platforms = ['ios', 'android'];
for (let platform of platforms) {
it(`[${platform}] works`, () => {
it(`for ${platform}`, () => {
expect(
__vue({
[platform]: true,

3
packages/webpack5/package.json
View File

@ -18,6 +18,7 @@
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"vue-loader": "^15.9.5",
"webpack-chain": "^6.5.1"
"webpack-chain": "^6.5.1",
"webpack-merge": "^5.4.0"
}
}

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

@ -2,11 +2,19 @@ import Config from 'webpack-chain';
import { IWebpackEnv, WebpackPlatform } from './index';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import { getDistPath } from '../helpers/projectHelpers';
import { DefinePlugin } from 'webpack';
import { WatchStateLoggerPlugin } from '../plugins/WatchStateLoggerPlugin';
// todo: add base configuration that's shared across all flavors
export default function (env: IWebpackEnv): Config {
const config = new Config();
const distPath = getDistPath(env);
const platform = determinePlatformFromEnv(env);
// look for loaders in
// - @nativescript/webpack/loaders
// - node_modules
config.resolveLoader.modules.add('@nativescript/webpack/loaders').add('node_modules');
// inspector_modules
config.when(shouldIncludeInspectorModules(env), (config) => {
@ -21,6 +29,53 @@ export default function (env: IWebpackEnv): Config {
// resolve symlinks
config.resolve.symlinks(true);
// set up ts support
config.module
.rule('ts')
.test(/\.ts$/)
.use('ts-loader')
.loader('ts-loader')
.options({
// configFile: '',
transpileOnly: true,
allowTsInNodeModules: true,
compilerOptions: {
sourceMap: true,
declaration: false,
},
getCustomTransformers() {
return {
before: [
// todo: transform NativeClass
],
};
},
});
// set up js
// todo: do we need babel-loader? It's useful to support it
config.module.rule('js').test(/\.js$/).use('babel-loader').loader('babel-loader');
// set up css
config.module
.rule('css')
.test(/\.css$/)
.use('css2json-loader')
.loader('css2json-loader')
.end()
.use('css-loader')
.loader('css-loader');
// set up scss
config.module
.rule('scss')
.test(/\.scss$/)
.use('css2json-loader')
.loader('css2json-loader')
.end()
.use('scss-loader')
.loader('scss-loader');
// items to clean
config.plugin('clean').use(CleanWebpackPlugin, [
{
@ -29,6 +84,28 @@ export default function (env: IWebpackEnv): Config {
},
]);
// todo: refine defaults
config.plugin('define').use(DefinePlugin, [
{
'global.NS_WEBPACK': true,
'global.isAndroid': platform === WebpackPlatform.android,
'global.isIOS': platform === WebpackPlatform.ios,
process: 'global.process',
},
]);
// todo: we should probably move away from CopyWebpackPlugin
// it has many issues we can solve by simply copying files **before** the build even starts
// this is just a temp inline plugin that does nothing while building out the configs.
config.plugin('copy').use(function CopyPluginTemp() {}, [
{
patterns: [],
},
]);
// add the WatchStateLogger plugin used to notify the CLI of build state
config.plugin('watch-state-logger').use(WatchStateLoggerPlugin);
return config;
}

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

@ -2,9 +2,16 @@ import base from './base';
import { IWebpackEnv } from '@nativescript/webpack';
import Config from 'webpack-chain';
// todo: add base configuration for core
// todo: add base configuration for core with javascript
export default function (env: IWebpackEnv): Config {
const config = base(env);
// set up xml
config.module
.rule('xml')
.test(/\.xml$/)
.use('xml-loader')
.loader('xml-loader');
return config;
}

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

@ -2,7 +2,7 @@ import base from './base';
import Config from 'webpack-chain';
import { VueLoaderPlugin } from 'vue-loader';
import { IWebpackEnv } from './index';
import { merge } from 'webpack-merge';
// todo: add base configuration for vue
export default function (env: IWebpackEnv): Config {
const config = base(env);
@ -29,15 +29,14 @@ export default function (env: IWebpackEnv): Config {
.rule('ts')
.use('ts-loader')
.loader('ts-loader')
.tap((options) => {
return {
...options,
appendTsSuffixTo: [/\.vue$/],
};
.tap((options = {}) => {
return merge(options, {
appendTsSuffixTo: ['\\.vue$'],
});
});
// add VueLoaderPlugin
config.plugin('vue-plugin').use(VueLoaderPlugin);
config.plugin('vue').use(VueLoaderPlugin);
// add an alias for vue, since some plugins may try to import it
config.resolve.alias.set('vue', 'nativescript-vue');

58
packages/webpack5/src/plugins/WatchStateLoggerPlugin.ts Normal file
View File

@ -0,0 +1,58 @@
export enum messages {
compilationComplete = 'Webpack compilation complete.',
startWatching = 'Webpack compilation complete. Watching for file changes.',
changeDetected = 'File change detected. Starting incremental webpack compilation...',
}
/**
* This little plugin will report the webpack state through the console.
* So the {N} CLI can get some idea when compilation completes.
*/
export class WatchStateLoggerPlugin {
isRunningWatching: boolean;
apply(compiler) {
const plugin = this;
compiler.hooks.watchRun.tapAsync('WatchStateLoggerPlugin', function (compiler, callback) {
plugin.isRunningWatching = true;
if (plugin.isRunningWatching) {
console.log(messages.changeDetected);
}
process.send && process.send(messages.changeDetected, (error) => null);
callback();
});
compiler.hooks.afterEmit.tapAsync('WatchStateLoggerPlugin', function (compilation, callback) {
callback();
if (plugin.isRunningWatching) {
console.log(messages.startWatching);
} else {
console.log(messages.compilationComplete);
}
const emittedFiles = Object.keys(compilation.assets).filter((assetKey) => compilation.assets[assetKey].emitted);
const chunkFiles = getChunkFiles(compilation);
process.send && process.send(messages.compilationComplete, (error) => null);
// Send emitted files so they can be LiveSynced if need be
process.send && process.send({ emittedFiles, chunkFiles, hash: compilation.hash }, (error) => null);
});
}
}
function getChunkFiles(compilation) {
const chunkFiles = [];
try {
compilation.chunks.forEach((chunk) => {
chunk.files.forEach((file) => {
if (file.indexOf('hot-update') === -1) {
chunkFiles.push(file);
}
});
});
} catch (e) {
console.log('Warning: Unable to find chunk files.');
}
return chunkFiles;
}