I want to speed up compile time. Right not it takes around 40s and I have no idea how make it faster.
I tried set isolatedModules to true in config but in result I have an error:
error TS1208: Cannot compile namespaces when the '--isolatedModules' flag is provided.
I'm using webpack-stream to have task in gulp.
My Gulpfile.js task
gulp.src('./tsScripts/users')
.pipe(webpack(
{
entry: {
"core_users": "./Orchard.Web/Modules/Core/tsScripts/users/users.ts",
"resources_product": "./Orchard.Web/Modules/Resources/tsScripts/products/product.ts",
"resources_products": "./Orchard.Web/Modules/Resources/tsScripts/products/products.ts",
"xrm_contractors": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.ts",
"xrm_contractors_create": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.create.ts",
"xrm_contractors_edit": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.edit.ts",
"xrm_contractors_details": "./Orchard.Web/Modules/Xrm/tsScripts/contractors/contractors.details.ts",
"resources_inventory": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.ts",
"resources_inventory_create": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.create.ts",
"resources_inventory_edit": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.edit.ts",
"resources_inventory_details": "./Orchard.Web/Modules/Resources/tsScripts/inventory/inventory.details.ts",
"phx_productRegistry": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.ts",
"phx_productRegistry_create": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.create.ts",
"phx_productRegistry_edit": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.edit.ts",
"phx_productRegistry_details": "./Orchard.Web/Modules/phx/tsScripts/productRegistry/productRegistry.details.ts",
"vendor": "./Orchard.Web/Modules/Core/tsScripts/vendor.ts",
"polyfills": "./Orchard.Web/Modules/Core/tsScripts/polyfills.ts"
},
output: {
path: __dirname,
filename: "./[name].js"
},
resolve: {
extensions: ['', '.ts', '.js'],
unsafeCache: true,
},
cache: true,
devtool: 'eval',
module: {
loaders: [
{
test: /\.ts/,
loaders: ['ts-loader'],
exclude: [/\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/],
options: {
transpileOnly: true
}
},
]
},
plugins: [
new wpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
new wpack.optimize.CommonsChunkPlugin(
{
name: "vendor",
minChunks: Infinity
})
]
}
))
.pipe(gulp.dest('Scripts/main/'));
vendor.ts
///<reference path="./typings/globals/core-js/index.d.ts"/>
///<reference path="./node_modules/#types/jquery/index.d.ts"/>
///<reference path="./node_modules/#types/select2/index.d.ts"/>
import 'zone.js/dist/zone';
import '#angular/common';
import '#angular/compiler';
import '#angular/core';
import '#angular/forms';
import '#angular/http';
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/router';
import 'jquery';
import 'angular2-datatable';
import 'angular2-modal';
import 'rxjs';
import 'datatables'
import 'select2'
Everything works fine, but waiting ~40s for every build... It's too long. I tried set jquery as external, but it gave me 1-3s.
Maybe external angular2? Or maybe I did something wrong and webpack is looking for files in my entire solution.
Thank you in advance for any help.
During development you can use webpack watch mode which enables incremental compilation.
Related
Here is my vite.config.js
`
import {
defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
plugins: [
laravel([
'resources/js/app.js'
]), ],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
});
`
app.js code
import '../../swiper/swiper-bundle';
import '../../jquery/dist/jquery';
I try to import packages that installed vs npm but I am not able to import those packages files in the app.js file
I am building a library which is used as a package in a Next.js app.
I have a variable in my .scss file which uses an url('./some-file.png') and I want this to generate a base64 url in order to be used in my other app easily.
When I build the project, after adding postcss-url, the generated url has not changed...there is no base64 url generated.
rollup.config.js:
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '#rollup/plugin-node-resolve'
import commonjs from '#rollup/plugin-commonjs'
import typescript from '#rollup/plugin-typescript'
import postcss from 'rollup-plugin-postcss'
import copy from 'rollup-plugin-copy'
import svgr from '#svgr/rollup'
import dts from 'rollup-plugin-dts'
import del from 'rollup-plugin-delete'
import analyze from 'rollup-plugin-analyzer'
import { terser } from 'rollup-plugin-terser'
import json from '#rollup/plugin-json'
import graphql from '#rollup/plugin-graphql'
import fs from 'fs'
import url from 'postcss-url'
import path from 'path'
import * as packageJson from './package.json'
const tsConfig = JSON.parse(fs.readFileSync(__dirname + '/tsconfig.json', 'utf8'))
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
copy({
targets: [
{
src: [
'src/ui/styles/palette.scss',
'src/ui/styles/themes.scss',
'src/ui/styles/urls.scss',
'src/ui/styles/_exports.module.scss'
],
dest: 'lib/scss'
},
{ src: 'src/assets/images', dest: 'lib/assets' }
],
verbose: true
}),
svgr({ dimensions: false }),
resolve({ preferBuiltins: true, mainFields: ['browser'] }),
postcss({
plugins: [
url({
url: "inline"
}),
],
extract: path.resolve('lib/styles.scss'),
}),
commonjs(),
json(),
typescript({ tsconfig: './tsconfig.json' }),
graphql(),
terser(),
analyze({ summaryOnly: true })
]
},
{
input: 'lib/types/src/index.d.ts',
output: [{ file: 'lib/index.d.ts', format: 'esm' }],
external: [/\.scss$/],
plugins: [
dts({
compilerOptions: {
baseUrl: '.',
paths: tsConfig.compilerOptions.paths
}
}),
del({ hook: 'buildEnd', targets: './lib/types' })
]
}
]
button.scss
#import '../../styles/themes.scss';
.background-color-header {
background: themed('header-background');
}
themes.scss
#import './urls.scss';
header-background: url($light-url) no-repeat #{','} $gradient-light-background-header,
and finally : urls.scss
$light-url: '/assets/images/my-image.png';
styles.scss which is the result of the build:
.background-color-header {
background: url("/assets/images/my-image.png") no-repeat , transparent linear-gradient(180deg, #faf8f4 0%, white 100%) 0% 0% no-repeat padding-box;
}
So, you can see that the url is not base64 ...
Any advice?
I am using nest.js, prisma, and graphql.
When I run the npm run start:dev command, I get an error.
If anyone knows how to solve this, please let me know.
ERROR [GraphQLModule] Missing
"driver" option. In the latest version of "#nestjs/graphql" package
(v10) a new required configuration property called "driver" has been
introduced. Check out the official documentation for more details on
how to migrate (https://docs.nestjs.com/graphql/migration-guide).
Example:
GraphQLModule.forRoot({
driver: ApolloDriver,
})
app.module.ts
import { Module } from '#nestjs/common';
import { GraphQLModule } from '#nestjs/graphql';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ApolloServerPluginLandingPageLocalDefault } from 'apollo-server-core';
import { DonationsModule } from './donations/donations.module';
#Module({
imports: [
GraphQLModule.forRoot({
playground: false,
plugins: [ApolloServerPluginLandingPageLocalDefault()],
typePaths: ['./**/*.graphql'],
}),
DonationsModule,
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
generate-typings.ts
import { GraphQLDefinitionsFactory } from '#nestjs/graphql';
import { join } from 'path';
const definitionsFactory = new GraphQLDefinitionsFactory();
definitionsFactory.generate({
typePaths: ['./src/**/*.graphql'],
path: join(process.cwd(), 'src/graphql.ts'),
outputAs: 'class',
watch: true,
});
fix
#Module({
imports: [
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
autoSchemaFile: true,
plugins: [ApolloServerPluginLandingPageLocalDefault()],
typePaths: ['./**/*.graphql'],
}),
DonationsModule,
],
controllers: [AppController],
providers: [AppService],
})
Checkout the nestjs/graphql documentation page and the other link that you have mentioned. You have to configure your GraphQLModule like this which I don't see in your code.
#Module({
imports: [
GraphQLModule.forRoot<ApolloDriverConfig>({
driver: ApolloDriver,
}),
],
})
Also don't forget to import
import { ApolloDriverConfig, ApolloDriver } from '#nestjs/apollo';
The symptom
When are run rollup -c I get a reasonable build, but I get this error if I use the SCSS double slash comments:
CssSyntaxError: //../packages/core/src/styles/layout.module.scss:56:8: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
As far as I can tell, I have setup the plugin to use sass and to use CSS Modules. When I try to set the parser to "postcss-scss" I get this other error:
[!] (plugin postcss) TypeError: node.getIterator is not a function
rollup.config.js
import url from "#rollup/plugin-url";
import svgr from "#svgr/rollup";
import autoprefixer from "autoprefixer";
import { resolve } from "path";
import postcssNormalize from "postcss-normalize";
import babel from "rollup-plugin-babel";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import { nodeResolve } from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import packageJson from "./package.json";
export default [
{
input: "src/components/index.ts",
output: [
{
file: `${packageJson.main}`,
format: "cjs",
sourcemap: true,
},
{
file: `${packageJson.module}`,
format: "esm",
sourcemap: true,
},
],
plugins: [
// include peer deps in the package
peerDepsExternal(),
// The next 2 allow importing commonjs packages like classnames
commonjs(),
nodeResolve(),
// transform
babel({
exclude: "node_modules/**",
}),
typescript({
typescript: require("typescript"),
tsconfig: "./tsconfig-prod.json",
}),
postcss({
plugins: [autoprefixer(), postcssNormalize()],
// exclude: "src/styles/**/*.scss",
namedExports: true,
sourceMap: true,
extract: false,
// modules: true,
autoModules: true,
minimize: true,
extensions: [".scss"],
use: ["sass"],
// parser: "postcss-scss",
}),
url(),
svgr(),
],
},
};
There are a couple of commented out options, which I have also tried. Yes, I can switch comment type - the sheer number of files notwithstanding, but it bothers me that this setup is not quite working, so any help would be much appreciated.
In the src/components folders I have this folder strcuture pattern for each component:
components ->
> Button ->
> index.ts
> Button.tsx
> Button.module.scss
I create a login.component.spec.ts for my loginComponent. However, when I run tns test android, the TestBed.createComponent(LoginComponent) failed. The error is below:
NativeScript / 29 (10; Android SDK built for x86) LoginComponent
Should create the app FAILED
Failed: StaticInjectorError(DynamicTestModule)[TestComponentRenderer
-> InjectionToken DocumentToken]:
StaticInjectorError(Platform: core)[TestComponentRenderer ->
InjectionToken DocumentToken]: document is not defined
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [
'TestComponentRenderer', InjectionToken DocumentToken ] }) at Jasmine
I cannot find any result in website about my problem. Thanks for helping.
I tried to include http module since someone said the undefined document may because of http. However, it still does not work.
This is code for login.component.spec.ts:
import "core-js";
import "zone.js/dist/zone";
import "zone.js/dist/proxy";
import "zone.js/dist/sync-test";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/long-stack-trace-zone";
import { ComponentFixture, async, TestBed} from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { NO_ERRORS_SCHEMA, DebugElement} from '#angular/core';
import { RouterTestingModule } from '#angular/router/testing';
import { Router } from '#angular/router';
import { ActivatedRoute } from "#angular/router";
import { RouterExtensions } from "nativescript-angular/router";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting }
from '#angular/platform-browser-dynamic/testing';
import { LoginComponent } from '~/pages/login/login.component';
describe ('LoginComponent', () => {
beforeEach(async( () => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
providers: [],
declarations: [
LoginComponent
],
schemas: [
NO_ERRORS_SCHEMA]
}).compileComponents();
}));
it('Should create the app', async( () => {
const fixture = TestBed.createComponent(LoginComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
You are using the BrowserDynamicTestingModule which is not valid for {N}. You are suppose to use NativeScriptTestingModule form nativescript-angular/testing.