mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-15 11:01:21 +08:00
feat: svelte config (#9061)
* wip: svelte webpack5 * added project svelte config * svelte snapshot
This commit is contained in:
Janos Hrubos
@ -0,0 +1,480 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`svelte configuration for android 1`] = `
|
||||||
|
"{
|
||||||
|
mode: 'development',
|
||||||
|
externals: [
|
||||||
|
'package.json',
|
||||||
|
'~/package.json'
|
||||||
|
],
|
||||||
|
devtool: 'inline-source-map',
|
||||||
|
target: 'node',
|
||||||
|
output: {
|
||||||
|
path: '__jest__/platforms/android/app/src/main/assets/app',
|
||||||
|
pathinfo: false,
|
||||||
|
publicPath: '',
|
||||||
|
libraryTarget: 'commonjs',
|
||||||
|
globalObject: 'global'
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
symlinks: true,
|
||||||
|
alias: {
|
||||||
|
'~': '<TODO>appFullPath',
|
||||||
|
'@': '<TODO>appFullPath',
|
||||||
|
svelte: 'svelte-native'
|
||||||
|
},
|
||||||
|
extensions: [
|
||||||
|
'.android.svelte',
|
||||||
|
'.svelte',
|
||||||
|
'.android.ts',
|
||||||
|
'.ts',
|
||||||
|
'.android.js',
|
||||||
|
'.js',
|
||||||
|
'.android.css',
|
||||||
|
'.css',
|
||||||
|
'.android.scss',
|
||||||
|
'.scss',
|
||||||
|
'.android.json',
|
||||||
|
'.json'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolveLoader: {
|
||||||
|
modules: [
|
||||||
|
'node_modules/@nativescript/webpack/dist/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: [
|
||||||
|
'\\\\\\\\.svelte$'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('js') */
|
||||||
|
{
|
||||||
|
test: /\\\\.js$/,
|
||||||
|
exclude: [
|
||||||
|
/node_modules/
|
||||||
|
],
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('js').use('babel-loader') */
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
generatorOpts: {
|
||||||
|
compact: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('css') */
|
||||||
|
{
|
||||||
|
test: /\\\\.css$/,
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('css').use('apply-css-loader') */
|
||||||
|
{
|
||||||
|
loader: 'apply-css-loader'
|
||||||
|
},
|
||||||
|
/* config.module.rule('css').use('css2json-loader') */
|
||||||
|
{
|
||||||
|
loader: 'css2json-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('scss') */
|
||||||
|
{
|
||||||
|
test: /\\\\.scss$/,
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('scss').use('apply-css-loader') */
|
||||||
|
{
|
||||||
|
loader: 'apply-css-loader'
|
||||||
|
},
|
||||||
|
/* config.module.rule('scss').use('css2json-loader') */
|
||||||
|
{
|
||||||
|
loader: 'css2json-loader'
|
||||||
|
},
|
||||||
|
/* config.module.rule('scss').use('sass-loader') */
|
||||||
|
{
|
||||||
|
loader: 'sass-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('svelte') */
|
||||||
|
{
|
||||||
|
test: /\\\\.svelte$/,
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('svelte').use('svelte-loader-hot') */
|
||||||
|
{
|
||||||
|
loader: 'svelte-loader-hot',
|
||||||
|
options: {
|
||||||
|
dev: false,
|
||||||
|
preprocess: [
|
||||||
|
undefined,
|
||||||
|
{
|
||||||
|
markup: function () { /* omitted long function */ }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
hotReload: false,
|
||||||
|
hotOptions: {
|
||||||
|
injectCss: false,
|
||||||
|
'native': true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
cacheGroups: {
|
||||||
|
defaultVendor: {
|
||||||
|
test: /[\\\\\\\\/]node_modules[\\\\\\\\/]/,
|
||||||
|
priority: -10,
|
||||||
|
name: 'vendor',
|
||||||
|
chunks: 'all'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minimizer: [
|
||||||
|
/* config.optimization.minimizer('TerserPlugin') */
|
||||||
|
new TerserPlugin(
|
||||||
|
{
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
collapse_vars: false,
|
||||||
|
sequences: false
|
||||||
|
},
|
||||||
|
keep_fnames: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
/* config.plugin('CleanWebpackPlugin') */
|
||||||
|
new CleanWebpackPlugin(
|
||||||
|
{
|
||||||
|
cleanOnceBeforeBuildPatterns: [
|
||||||
|
'__jest__/platforms/android/app/src/main/assets/app/**/*'
|
||||||
|
],
|
||||||
|
verbose: false
|
||||||
|
}
|
||||||
|
),
|
||||||
|
/* config.plugin('DefinePlugin') */
|
||||||
|
new DefinePlugin(
|
||||||
|
{
|
||||||
|
__DEV__: true,
|
||||||
|
__NS_WEBPACK__: true,
|
||||||
|
__CSS_PARSER__: '\\"css-tree\\"',
|
||||||
|
__ANDROID__: true,
|
||||||
|
__IOS__: false,
|
||||||
|
'global.isAndroid': true,
|
||||||
|
'global.isIOS': false,
|
||||||
|
process: 'global.process'
|
||||||
|
}
|
||||||
|
),
|
||||||
|
/* config.plugin('CopyWebpackPlugin') */
|
||||||
|
new CopyPlugin(
|
||||||
|
{
|
||||||
|
patterns: [
|
||||||
|
{
|
||||||
|
from: 'assets/**',
|
||||||
|
context: 'src',
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
globOptions: {
|
||||||
|
dot: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: 'fonts/**',
|
||||||
|
context: 'src',
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
globOptions: {
|
||||||
|
dot: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: '**/*.+(jpg|png)',
|
||||||
|
context: 'src',
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
globOptions: {
|
||||||
|
dot: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
),
|
||||||
|
/* config.plugin('WatchStatePlugin') */
|
||||||
|
new WatchStatePlugin()
|
||||||
|
],
|
||||||
|
entry: {
|
||||||
|
bundle: [
|
||||||
|
'@nativescript/core/globals/index.js',
|
||||||
|
'src/app.js'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`svelte configuration for ios 1`] = `
|
||||||
|
"{
|
||||||
|
mode: 'development',
|
||||||
|
externals: [
|
||||||
|
'package.json',
|
||||||
|
'~/package.json'
|
||||||
|
],
|
||||||
|
devtool: 'inline-source-map',
|
||||||
|
target: 'node',
|
||||||
|
output: {
|
||||||
|
path: '__jest__/platforms/ios/__jest__/app',
|
||||||
|
pathinfo: false,
|
||||||
|
publicPath: '',
|
||||||
|
libraryTarget: 'commonjs',
|
||||||
|
globalObject: 'global'
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
symlinks: true,
|
||||||
|
alias: {
|
||||||
|
'~': '<TODO>appFullPath',
|
||||||
|
'@': '<TODO>appFullPath',
|
||||||
|
svelte: 'svelte-native'
|
||||||
|
},
|
||||||
|
extensions: [
|
||||||
|
'.ios.svelte',
|
||||||
|
'.svelte',
|
||||||
|
'.ios.ts',
|
||||||
|
'.ts',
|
||||||
|
'.ios.js',
|
||||||
|
'.js',
|
||||||
|
'.ios.css',
|
||||||
|
'.css',
|
||||||
|
'.ios.scss',
|
||||||
|
'.scss',
|
||||||
|
'.ios.json',
|
||||||
|
'.json'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolveLoader: {
|
||||||
|
modules: [
|
||||||
|
'node_modules/@nativescript/webpack/dist/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: [
|
||||||
|
'\\\\\\\\.svelte$'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('js') */
|
||||||
|
{
|
||||||
|
test: /\\\\.js$/,
|
||||||
|
exclude: [
|
||||||
|
/node_modules/
|
||||||
|
],
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('js').use('babel-loader') */
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
generatorOpts: {
|
||||||
|
compact: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('css') */
|
||||||
|
{
|
||||||
|
test: /\\\\.css$/,
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('css').use('apply-css-loader') */
|
||||||
|
{
|
||||||
|
loader: 'apply-css-loader'
|
||||||
|
},
|
||||||
|
/* config.module.rule('css').use('css2json-loader') */
|
||||||
|
{
|
||||||
|
loader: 'css2json-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('scss') */
|
||||||
|
{
|
||||||
|
test: /\\\\.scss$/,
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('scss').use('apply-css-loader') */
|
||||||
|
{
|
||||||
|
loader: 'apply-css-loader'
|
||||||
|
},
|
||||||
|
/* config.module.rule('scss').use('css2json-loader') */
|
||||||
|
{
|
||||||
|
loader: 'css2json-loader'
|
||||||
|
},
|
||||||
|
/* config.module.rule('scss').use('sass-loader') */
|
||||||
|
{
|
||||||
|
loader: 'sass-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
/* config.module.rule('svelte') */
|
||||||
|
{
|
||||||
|
test: /\\\\.svelte$/,
|
||||||
|
use: [
|
||||||
|
/* config.module.rule('svelte').use('svelte-loader-hot') */
|
||||||
|
{
|
||||||
|
loader: 'svelte-loader-hot',
|
||||||
|
options: {
|
||||||
|
dev: false,
|
||||||
|
preprocess: [
|
||||||
|
undefined,
|
||||||
|
{
|
||||||
|
markup: function () { /* omitted long function */ }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
hotReload: false,
|
||||||
|
hotOptions: {
|
||||||
|
injectCss: false,
|
||||||
|
'native': true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
cacheGroups: {
|
||||||
|
defaultVendor: {
|
||||||
|
test: /[\\\\\\\\/]node_modules[\\\\\\\\/]/,
|
||||||
|
priority: -10,
|
||||||
|
name: 'vendor',
|
||||||
|
chunks: 'all'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
minimizer: [
|
||||||
|
/* config.optimization.minimizer('TerserPlugin') */
|
||||||
|
new TerserPlugin(
|
||||||
|
{
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
collapse_vars: true,
|
||||||
|
sequences: true
|
||||||
|
},
|
||||||
|
keep_fnames: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
/* config.plugin('CleanWebpackPlugin') */
|
||||||
|
new CleanWebpackPlugin(
|
||||||
|
{
|
||||||
|
cleanOnceBeforeBuildPatterns: [
|
||||||
|
'__jest__/platforms/ios/__jest__/app/**/*'
|
||||||
|
],
|
||||||
|
verbose: false
|
||||||
|
}
|
||||||
|
),
|
||||||
|
/* config.plugin('DefinePlugin') */
|
||||||
|
new DefinePlugin(
|
||||||
|
{
|
||||||
|
__DEV__: true,
|
||||||
|
__NS_WEBPACK__: true,
|
||||||
|
__CSS_PARSER__: '\\"css-tree\\"',
|
||||||
|
__ANDROID__: false,
|
||||||
|
__IOS__: true,
|
||||||
|
'global.isAndroid': false,
|
||||||
|
'global.isIOS': true,
|
||||||
|
process: 'global.process'
|
||||||
|
}
|
||||||
|
),
|
||||||
|
/* config.plugin('CopyWebpackPlugin') */
|
||||||
|
new CopyPlugin(
|
||||||
|
{
|
||||||
|
patterns: [
|
||||||
|
{
|
||||||
|
from: 'assets/**',
|
||||||
|
context: 'src',
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
globOptions: {
|
||||||
|
dot: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: 'fonts/**',
|
||||||
|
context: 'src',
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
globOptions: {
|
||||||
|
dot: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: '**/*.+(jpg|png)',
|
||||||
|
context: 'src',
|
||||||
|
noErrorOnMissing: true,
|
||||||
|
globOptions: {
|
||||||
|
dot: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
),
|
||||||
|
/* config.plugin('WatchStatePlugin') */
|
||||||
|
new WatchStatePlugin()
|
||||||
|
],
|
||||||
|
entry: {
|
||||||
|
bundle: [
|
||||||
|
'@nativescript/core/globals/index.js',
|
||||||
|
'src/app.js'
|
||||||
|
],
|
||||||
|
'tns_modules/@nativescript/core/inspector_modules': [
|
||||||
|
'@nativescript/core/inspector_modules'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}"
|
||||||
|
`;
|
||||||
17
packages/webpack5/__tests__/configuration/svelte.spec.ts
Normal file
17
packages/webpack5/__tests__/configuration/svelte.spec.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
// @ts-ignore
|
||||||
|
import Config from 'webpack-chain';
|
||||||
|
import svelte from '../../src/configuration/svelte';
|
||||||
|
import { init } from '../../src';
|
||||||
|
|
||||||
|
describe.only('svelte configuration', () => {
|
||||||
|
const platforms = ['ios', 'android'];
|
||||||
|
|
||||||
|
for (let platform of platforms) {
|
||||||
|
it(`for ${platform}`, () => {
|
||||||
|
init({
|
||||||
|
[platform]: true,
|
||||||
|
});
|
||||||
|
expect(svelte(new Config()).toString()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -31,6 +31,7 @@
|
|||||||
"sass": "^1.29.0",
|
"sass": "^1.29.0",
|
||||||
"sass-loader": "^10.1.0",
|
"sass-loader": "^10.1.0",
|
||||||
"source-map": "^0.7.3",
|
"source-map": "^0.7.3",
|
||||||
|
"svelte-native-preprocessor": "^0.2.0",
|
||||||
"terser-webpack-plugin": "^5.0.3",
|
"terser-webpack-plugin": "^5.0.3",
|
||||||
"ts-dedent": "^2.0.0",
|
"ts-dedent": "^2.0.0",
|
||||||
"ts-loader": "^8.0.11",
|
"ts-loader": "^8.0.11",
|
||||||
|
|||||||
@ -1,10 +1,65 @@
|
|||||||
import base from './base';
|
import base from './base';
|
||||||
import { IWebpackEnv } from '@nativescript/webpack';
|
import { env as _env, IWebpackEnv } from '../index';
|
||||||
import Config from 'webpack-chain';
|
import Config from 'webpack-chain';
|
||||||
|
import { getPlatform, getProjectRootPath } from '../helpers/project';
|
||||||
|
import { merge } from 'webpack-merge';
|
||||||
|
import svelteNativePreprocessor from 'svelte-native-preprocessor';
|
||||||
|
|
||||||
// todo: add base configuration for svelte
|
export default function (config: Config, env: IWebpackEnv = _env): Config {
|
||||||
export default function (config: Config, env: IWebpackEnv): Config {
|
|
||||||
base(config, env);
|
base(config, env);
|
||||||
|
|
||||||
|
const platform = getPlatform();
|
||||||
|
const mode = env.production ? 'production' : 'development';
|
||||||
|
const production = mode === 'production';
|
||||||
|
|
||||||
|
// resolve .svelte files
|
||||||
|
// the order is reversed because we are using prepend!
|
||||||
|
config.resolve.extensions.prepend('.svelte').prepend(`.${platform}.svelte`);
|
||||||
|
|
||||||
|
// add a rule for .svelte files
|
||||||
|
config.module
|
||||||
|
.rule('svelte')
|
||||||
|
.test(/\.svelte$/)
|
||||||
|
.use('svelte-loader-hot')
|
||||||
|
.loader('svelte-loader-hot')
|
||||||
|
.tap((options) => {
|
||||||
|
return {
|
||||||
|
...options,
|
||||||
|
dev: production,
|
||||||
|
preprocess: [getSvelteConfig()?.preprocess, svelteNativePreprocessor()],
|
||||||
|
hotReload: production,
|
||||||
|
hotOptions: {
|
||||||
|
injectCss: false,
|
||||||
|
native: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.end();
|
||||||
|
|
||||||
|
// set up ts support in svelte files
|
||||||
|
config.module
|
||||||
|
.rule('ts')
|
||||||
|
.use('ts-loader')
|
||||||
|
.loader('ts-loader')
|
||||||
|
.tap((options = {}) => {
|
||||||
|
return merge(options, {
|
||||||
|
appendTsSuffixTo: ['\\.svelte$'],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// add an alias for svelte, since some plugins may try to import it
|
||||||
|
config.resolve.alias.set('svelte', 'svelte-native');
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSvelteConfig(): { preprocess: any } | null {
|
||||||
|
try {
|
||||||
|
const resolvedPath = require.resolve(`./svelte.config.js`, {
|
||||||
|
paths: [getProjectRootPath()],
|
||||||
|
});
|
||||||
|
return require(resolvedPath);
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user