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

feat: make react config functional

Browse Source
This commit is contained in:
Igor Randjelovic
2020-11-22 15:51:12 +01:00
parent 403fa6b30f
commit 241c4102f7
6 changed files with 107 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap
View File

@ -4,7 +4,8 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
"{ "{
mode: 'development', mode: 'development',
externals: [ externals: [
'package.json' 'package.json',
'~/package.json'
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
target: 'node', target: 'node',
@ -18,7 +19,6 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
resolve: { resolve: {
symlinks: true, symlinks: true,
alias: { alias: {
'~/package.json': 'package.json',
'~': '<TODO>appFullPath', '~': '<TODO>appFullPath',
'@': '<TODO>appFullPath', '@': '<TODO>appFullPath',
'react-dom': 'react-nativescript' 'react-dom': 'react-nativescript'
@ -82,10 +82,18 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
/* config.module.rule('js') */ /* config.module.rule('js') */
{ {
test: /\\\\.js$/, test: /\\\\.js$/,
exclude: [
/node_modules/
],
use: [ use: [
/* config.module.rule('js').use('babel-loader') */ /* config.module.rule('js').use('babel-loader') */
{ {
loader: 'babel-loader' loader: 'babel-loader',
options: {
generatorOpts: {
compact: false
}
}
} }
] ]
}, },
@ -179,16 +187,19 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
new WatchStateLoggerPlugin(), new WatchStateLoggerPlugin(),
/* config.plugin('HotModuleReplacementPlugin') */ /* config.plugin('HotModuleReplacementPlugin') */
new HotModuleReplacementPlugin(), new HotModuleReplacementPlugin(),
/* config.plugin('ReactRefreshWebpackPlugin') */ /* config.plugin('ReactRefreshPlugin') */
new ReactRefreshWebpackPlugin( new ReactRefreshPlugin(
{ {
overlay: false, overlay: false,
forceEnable: false forceEnable: false,
exclude: /node_modules/i,
include: /\\\\.([jt]sx?|flow)$/i
} }
) )
], ],
entry: { entry: {
bundle: [ bundle: [
'@nativescript/core/globals/index.js',
'src/app.js' 'src/app.js'
] ]
} }
@ -199,7 +210,8 @@ exports[`react configuration > android > base config 1`] = `
"{ "{
mode: 'development', mode: 'development',
externals: [ externals: [
'package.json' 'package.json',
'~/package.json'
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
target: 'node', target: 'node',
@ -213,7 +225,6 @@ exports[`react configuration > android > base config 1`] = `
resolve: { resolve: {
symlinks: true, symlinks: true,
alias: { alias: {
'~/package.json': 'package.json',
'~': '<TODO>appFullPath', '~': '<TODO>appFullPath',
'@': '<TODO>appFullPath', '@': '<TODO>appFullPath',
'react-dom': 'react-nativescript' 'react-dom': 'react-nativescript'
@ -248,17 +259,6 @@ exports[`react configuration > android > base config 1`] = `
/\\\\.tsx$/ /\\\\.tsx$/
], ],
use: [ use: [
/* config.module.rule('ts').use('babel-loader|react-refresh') */
{
loader: 'babel-loader',
options: {
sourceMaps: 'inline',
babelrc: false,
plugins: [
'react-refresh/babel'
]
}
},
/* config.module.rule('ts').use('ts-loader') */ /* config.module.rule('ts').use('ts-loader') */
{ {
loader: 'ts-loader', loader: 'ts-loader',
@ -277,10 +277,18 @@ exports[`react configuration > android > base config 1`] = `
/* config.module.rule('js') */ /* config.module.rule('js') */
{ {
test: /\\\\.js$/, test: /\\\\.js$/,
exclude: [
/node_modules/
],
use: [ use: [
/* config.module.rule('js').use('babel-loader') */ /* config.module.rule('js').use('babel-loader') */
{ {
loader: 'babel-loader' loader: 'babel-loader',
options: {
generatorOpts: {
compact: false
}
}
} }
] ]
}, },
@ -375,6 +383,7 @@ exports[`react configuration > android > base config 1`] = `
], ],
entry: { entry: {
bundle: [ bundle: [
'@nativescript/core/globals/index.js',
'src/app.js' 'src/app.js'
] ]
} }
@ -385,7 +394,8 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
"{ "{
mode: 'development', mode: 'development',
externals: [ externals: [
'package.json' 'package.json',
'~/package.json'
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
target: 'node', target: 'node',
@ -399,7 +409,6 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
resolve: { resolve: {
symlinks: true, symlinks: true,
alias: { alias: {
'~/package.json': 'package.json',
'~': '<TODO>appFullPath', '~': '<TODO>appFullPath',
'@': '<TODO>appFullPath', '@': '<TODO>appFullPath',
'react-dom': 'react-nativescript' 'react-dom': 'react-nativescript'
@ -463,10 +472,18 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
/* config.module.rule('js') */ /* config.module.rule('js') */
{ {
test: /\\\\.js$/, test: /\\\\.js$/,
exclude: [
/node_modules/
],
use: [ use: [
/* config.module.rule('js').use('babel-loader') */ /* config.module.rule('js').use('babel-loader') */
{ {
loader: 'babel-loader' loader: 'babel-loader',
options: {
generatorOpts: {
compact: false
}
}
} }
] ]
}, },
@ -560,16 +577,19 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
new WatchStateLoggerPlugin(), new WatchStateLoggerPlugin(),
/* config.plugin('HotModuleReplacementPlugin') */ /* config.plugin('HotModuleReplacementPlugin') */
new HotModuleReplacementPlugin(), new HotModuleReplacementPlugin(),
/* config.plugin('ReactRefreshWebpackPlugin') */ /* config.plugin('ReactRefreshPlugin') */
new ReactRefreshWebpackPlugin( new ReactRefreshPlugin(
{ {
overlay: false, overlay: false,
forceEnable: false forceEnable: false,
exclude: /node_modules/i,
include: /\\\\.([jt]sx?|flow)$/i
} }
) )
], ],
entry: { entry: {
bundle: [ bundle: [
'@nativescript/core/globals/index.js',
'src/app.js' 'src/app.js'
], ],
'tns_modules/@nativescript/core/inspector_modules': [ 'tns_modules/@nativescript/core/inspector_modules': [
@ -583,7 +603,8 @@ exports[`react configuration > ios > base config 1`] = `
"{ "{
mode: 'development', mode: 'development',
externals: [ externals: [
'package.json' 'package.json',
'~/package.json'
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
target: 'node', target: 'node',
@ -597,7 +618,6 @@ exports[`react configuration > ios > base config 1`] = `
resolve: { resolve: {
symlinks: true, symlinks: true,
alias: { alias: {
'~/package.json': 'package.json',
'~': '<TODO>appFullPath', '~': '<TODO>appFullPath',
'@': '<TODO>appFullPath', '@': '<TODO>appFullPath',
'react-dom': 'react-nativescript' 'react-dom': 'react-nativescript'
@ -632,17 +652,6 @@ exports[`react configuration > ios > base config 1`] = `
/\\\\.tsx$/ /\\\\.tsx$/
], ],
use: [ use: [
/* config.module.rule('ts').use('babel-loader|react-refresh') */
{
loader: 'babel-loader',
options: {
sourceMaps: 'inline',
babelrc: false,
plugins: [
'react-refresh/babel'
]
}
},
/* config.module.rule('ts').use('ts-loader') */ /* config.module.rule('ts').use('ts-loader') */
{ {
loader: 'ts-loader', loader: 'ts-loader',
@ -661,10 +670,18 @@ exports[`react configuration > ios > base config 1`] = `
/* config.module.rule('js') */ /* config.module.rule('js') */
{ {
test: /\\\\.js$/, test: /\\\\.js$/,
exclude: [
/node_modules/
],
use: [ use: [
/* config.module.rule('js').use('babel-loader') */ /* config.module.rule('js').use('babel-loader') */
{ {
loader: 'babel-loader' loader: 'babel-loader',
options: {
generatorOpts: {
compact: false
}
}
} }
] ]
}, },
@ -759,6 +776,7 @@ exports[`react configuration > ios > base config 1`] = `
], ],
entry: { entry: {
bundle: [ bundle: [
'@nativescript/core/globals/index.js',
'src/app.js' 'src/app.js'
], ],
'tns_modules/@nativescript/core/inspector_modules': [ 'tns_modules/@nativescript/core/inspector_modules': [

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

@ -4,7 +4,8 @@ exports[`vue configuration for android 1`] = `
"{ "{
mode: 'development', mode: 'development',
externals: [ externals: [
'package.json' 'package.json',
'~/package.json'
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
target: 'node', target: 'node',
@ -18,7 +19,6 @@ exports[`vue configuration for android 1`] = `
resolve: { resolve: {
symlinks: true, symlinks: true,
alias: { alias: {
'~/package.json': 'package.json',
'~': '<TODO>appFullPath', '~': '<TODO>appFullPath',
'@': '<TODO>appFullPath', '@': '<TODO>appFullPath',
vue: 'nativescript-vue' vue: 'nativescript-vue'
@ -73,10 +73,18 @@ exports[`vue configuration for android 1`] = `
/* config.module.rule('js') */ /* config.module.rule('js') */
{ {
test: /\\\\.js$/, test: /\\\\.js$/,
exclude: [
/node_modules/
],
use: [ use: [
/* config.module.rule('js').use('babel-loader') */ /* config.module.rule('js').use('babel-loader') */
{ {
loader: 'babel-loader' loader: 'babel-loader',
options: {
generatorOpts: {
compact: false
}
}
} }
] ]
}, },
@ -189,6 +197,7 @@ exports[`vue configuration for android 1`] = `
], ],
entry: { entry: {
bundle: [ bundle: [
'@nativescript/core/globals/index.js',
'src/app.js' 'src/app.js'
] ]
} }
@ -199,7 +208,8 @@ exports[`vue configuration for ios 1`] = `
"{ "{
mode: 'development', mode: 'development',
externals: [ externals: [
'package.json' 'package.json',
'~/package.json'
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
target: 'node', target: 'node',
@ -213,7 +223,6 @@ exports[`vue configuration for ios 1`] = `
resolve: { resolve: {
symlinks: true, symlinks: true,
alias: { alias: {
'~/package.json': 'package.json',
'~': '<TODO>appFullPath', '~': '<TODO>appFullPath',
'@': '<TODO>appFullPath', '@': '<TODO>appFullPath',
vue: 'nativescript-vue' vue: 'nativescript-vue'
@ -268,10 +277,18 @@ exports[`vue configuration for ios 1`] = `
/* config.module.rule('js') */ /* config.module.rule('js') */
{ {
test: /\\\\.js$/, test: /\\\\.js$/,
exclude: [
/node_modules/
],
use: [ use: [
/* config.module.rule('js').use('babel-loader') */ /* config.module.rule('js').use('babel-loader') */
{ {
loader: 'babel-loader' loader: 'babel-loader',
options: {
generatorOpts: {
compact: false
}
}
} }
] ]
}, },
@ -384,6 +401,7 @@ exports[`vue configuration for ios 1`] = `
], ],
entry: { entry: {
bundle: [ bundle: [
'@nativescript/core/globals/index.js',
'src/app.js' 'src/app.js'
], ],
'tns_modules/@nativescript/core/inspector_modules': [ 'tns_modules/@nativescript/core/inspector_modules': [

2
packages/webpack5/package.json
View File

@ -14,12 +14,14 @@
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.12.3", "@babel/core": "^7.12.3",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"babel-loader": "^8.2.1", "babel-loader": "^8.2.1",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"cli-highlight": "^2.1.8", "cli-highlight": "^2.1.8",
"css": "^3.0.0", "css": "^3.0.0",
"css-loader": "^5.0.1", "css-loader": "^5.0.1",
"loader-utils": "^2.0.0", "loader-utils": "^2.0.0",
"react-refresh": "^0.9.0",
"scss": "^0.2.4", "scss": "^0.2.4",
"scss-loader": "^0.0.1", "scss-loader": "^0.0.1",
"source-map": "^0.7.3", "source-map": "^0.7.3",

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

@ -134,8 +134,15 @@ export default function (config: Config, env: IWebpackEnv): Config {
config.module config.module
.rule('js') .rule('js')
.test(/\.js$/) .test(/\.js$/)
.exclude.add(/node_modules/)
.end()
.use('babel-loader') .use('babel-loader')
.loader('babel-loader'); .loader('babel-loader')
.options({
generatorOpts: {
compact: false,
},
});
// set up css // set up css
config.module config.module

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

@ -19,15 +19,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
config.module config.module
.rule('ts') .rule('ts')
.test([...config.module.rule('ts').get('test'), /\.tsx$/]) .test([...config.module.rule('ts').get('test'), /\.tsx$/]);
.use('babel-loader|react-refresh')
.loader('babel-loader')
.before('ts-loader')
.options({
sourceMaps: isAnySourceMapEnabled ? 'inline' : false,
babelrc: false,
plugins: ['react-refresh/babel'],
});
config.plugin('DefinePlugin').tap((args) => { config.plugin('DefinePlugin').tap((args) => {
args[0] = merge(args[0], { args[0] = merge(args[0], {
@ -45,9 +37,20 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
// todo: env flag to forceEnable? // todo: env flag to forceEnable?
config.when(env.hmr && !production, (config) => { config.when(env.hmr && !production, (config) => {
config.module
.rule('ts')
.use('babel-loader|react-refresh')
.loader('babel-loader')
.before('ts-loader')
.options({
sourceMaps: isAnySourceMapEnabled ? 'inline' : false,
babelrc: false,
plugins: ['react-refresh/babel'],
});
config config
.plugin('ReactRefreshWebpackPlugin') .plugin('ReactRefreshPlugin')
.use(function ReactRefreshWebpackPlugin() {}, [ .use(require('@pmmmwh/react-refresh-webpack-plugin'), [
{ {
/** /**
* Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now. * Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now.

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

@ -1,4 +1,3 @@
import * as compiler from 'nativescript-vue-template-compiler';
import { VueLoaderPlugin } from 'vue-loader'; import { VueLoaderPlugin } from 'vue-loader';
import { merge } from 'webpack-merge'; import { merge } from 'webpack-merge';
import Config from 'webpack-chain'; import Config from 'webpack-chain';
@ -24,7 +23,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
.tap((options) => { .tap((options) => {
return { return {
...options, ...options,
compiler, compiler: require('nativescript-vue-template-compiler'),
}; };
}) })
.end(); .end();