คำถามติดแท็ก webpack

ฉันพยายามใช้typescript 3.7คุณสมบัติต่างๆเช่นการเชื่อมต่อเสริม, Nullish Coalescing แต่webpackทำให้ฉันมีข้อผิดพลาดในขณะที่การส่ง app: Module parse failed: Unexpected token (50:40) app: File was processed with these loaders: app: * ../../../node_modules/ts-loader/index.js app: You may need an additional loader to handle the result of these loaders. app: | export const Layout = (props) => { app: | const regionsResults = …

21 typescript  webpack  ts-loader 

ฉันได้สร้างแพคเกจ NPM ที่ค่อนข้างเล็กซึ่งประกอบด้วย ES6 คลาสที่แตกต่างกันประมาณ 5 คลาสซึ่งมีอยู่ในไฟล์เดียวแต่ละไฟล์พวกเขาทั้งหมดมีลักษณะเช่นนี้: export default class MyClass { // ... } ฉันได้ตั้งค่าจุดเริ่มต้นสำหรับแพ็คเกจของฉันที่มีลักษณะดังนี้: export { default as MyClass } from './my-class.js'; export { default as MyOtherClass } from './my-other-class.js'; ฉันได้เรียกใช้จุดเริ่มต้นผ่าน webpack และ babel ที่ลงท้ายด้วย index.js transpiled และ minified การติดตั้งและนำเข้าแพคเกจใช้งานได้ดี แต่เมื่อฉันทำสิ่งต่อไปนี้จากรหัสลูกค้าของฉัน: import { MyClass } from 'my-package'; ไม่เพียงแค่นำเข้า …

16 javascript  webpack  babeljs  es6-modules 

ฉันมีแอป react (แอพ A) สร้างขึ้นเมื่อประมาณ 2 ปีที่แล้วโดยใช้ create-react-app และมันถูกเปิดออก แอปถูกส่งออกเป็นโมดูล commonjs2 และจัดส่งในแพ็คเกจ NPM ที่จะใช้ในโครงการ next.js (แอป B) ทุกอย่างเป็นไปอย่างราบรื่นจนกระทั่งฉันอัปเดตแพ็กเกจบางตัวในแอพ A ซึ่งมีส่วนประกอบทั่วไปที่เราใช้ ข้อผิดพลาดเมื่อนำเข้าแอพ B เป็นหน้าต่างที่ไม่ได้กำหนดอาจเนื่องมาจาก SSR ฉันแก้ไขสิ่งนี้ในการกำหนดค่า webpack ของแอพ A โดยใช้ globalObject: 'this'ของแอปโดยใช้ ตอนนี้เมื่อฉันพยายามนำเข้าแอพ A ในแอพ B ข้อความแสดงข้อผิดพลาดคือ: TypeError: Cannot read property 'webpackJsonp' of undefined ผมถือว่าเป็นสิ่งที่บางแห่งพยายามโทรwindow['webpackJsonp']? ฉันได้ลองเปลี่ยน webpackJsonpFunction แล้ว แต่ตามที่คาดไว้มันจะพยายามหาคุณสมบัติอื่นที่ไม่ได้กำหนด ความช่วยเหลือใด ๆ …

16 reactjs  npm  webpack  next.js 

ฉันกำลังสร้างไลบรารีคอมโพเนนต์ React ที่แชร์ได้ ไลบรารีมีส่วนประกอบมากมาย แต่ผู้ใช้อาจจำเป็นต้องใช้เพียงไม่กี่องค์ประกอบเท่านั้น เมื่อคุณรวมรหัสกับ Webpack (หรือพัสดุหรือ Rollup) มันจะสร้างไฟล์เดียวหนึ่งไฟล์ที่มีรหัสทั้งหมด ด้วยเหตุผลด้านประสิทธิภาพฉันไม่ต้องการให้เบราว์เซอร์ดาวน์โหลดรหัสทั้งหมดเว้นแต่จะใช้งานจริง ฉันคิดถูกหรือไม่ว่าไม่ควรรวมส่วนประกอบต่างๆ การรวมกลุ่มจะถูกทิ้งไว้กับผู้บริโภคของส่วนประกอบหรือไม่ ฉันจะปล่อยให้สิ่งอื่นใดกับผู้บริโภคส่วนประกอบหรือไม่ ฉันเพิ่งจะส่งผ่าน JSX และมันได้หรือไม่ หาก repo เดียวกันมีส่วนประกอบต่าง ๆ มากมายสิ่งที่ควรอยู่ใน main.js?

12 reactjs  npm  webpack  es6-modules  rollup 

ERROR in C:/phpStudy2018/PHPTutorial/WWW/Tms.Web/node_modules/@types/node/globals.d.ts(139,11): 139:11 Interface 'NodeRequire' cannot simultaneously extend types 'Require' and 'RequireFunction'. Named property 'cache' of types 'Require' and 'RequireFunction' are not identical. 137 | 138 | // For backwards compability > 139 | interface NodeRequire extends NodeJS.Require {} | ^ 140 | interface RequireResolve extends NodeJS.RequireResolve {} 141 …

12 typescript  vue.js  webpack 

พื้นหลังของปัญหา: ฉันใช้ katex เพื่อแสดงผลทางคณิตศาสตร์บางอย่างบนหน้าเว็บ จากนั้นฉันต้องการสร้างส่วน PDF ของหน้านั้นดังนั้นฉันจึงสร้างเอกสาร HTML ที่มีส่วนที่จะส่งออกที่อินไลน์ CSS ทั้งหมดและส่งต่อไปยัง renderer ตัวแสดงภาพไม่สามารถเข้าถึงทรัพยากรของโหนดได้นั่นคือสาเหตุที่ทุกอย่างถูกแทรกไว้ มันทำงานได้อย่างสมบูรณ์แบบยกเว้นแบบอักษร ฉันลองทั้ง url-loader และ bas64-inline-loader แต่ฟอนต์ที่สร้างขึ้นไม่ได้ถูกแทรก ฉันตรวจสอบ CSS ที่สร้างขึ้นในดีบักเกอร์และ URL เก่ายังอยู่ในนั้นไม่มี data-URL สำหรับแบบอักษร นี่คือ webpack.config.js ปัจจุบันของฉัน: const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', …

10 javascript  css  webpack  data-uri 

ในโปรเจค nextjs ของฉันฉันได้แม็พพา ธjsconfig.jsonเพื่อทำให้การนำเข้าสัมบูรณ์ง่าย { "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["./*"] }, "target": "es6", "module": "commonjs", "experimentalDecorators": true } } เส้นทางการนำเข้าของฉันมีลักษณะเช่นนี้ import { VIEW } from '@/src/shared/constants'; ฉันeslintrc.jsมีการตั้งค่าที่ระบุเป็น module.exports = { ... , settings: { "import/resolver": { alias: { extensions: [".js"], map: ["@", "."] } } } } …

9 javascript  webpack  babel  eslint 

ฉันเพิ่งทำงานกับการเพิ่มประสิทธิภาพเว็บไซต์บางอย่างและฉันเริ่มใช้การแยกรหัสใน webpack โดยใช้คำสั่งนำเข้าเช่นนี้: import(/* webpackChunkName: 'pageB-chunk' */ './pageB') ซึ่งสร้างpageB-chunk.jsอย่างถูกต้องตอนนี้สมมติว่าฉันต้องการดึงข้อมูลอันนี้ใน pageA ฉันสามารถทำได้โดยเพิ่มคำสั่งนี้ในหน้า A: import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB') ซึ่งจะส่งผลให้ <link rel="prefetch" href="pageB-chunk.js"> ถูกผนวกเข้ากับส่วนหัวของ HTML จากนั้นเบราว์เซอร์จะดึงข้อมูลล่วงหน้าจนดีมาก ปัญหาคือคำแถลงการนำเข้าที่ฉันใช้ที่นี่ไม่เพียง แต่ดึงไฟล์ js ล่วงหน้า แต่ยังประเมินไฟล์ js หมายความว่ารหัสของไฟล์ js นั้นถูกวิเคราะห์ & คอมไพล์เป็นไบต์รหัสระดับบนสุดของ JS นั้นจะถูกดำเนินการ นี่เป็นการดำเนินการที่ใช้เวลานานมากบนอุปกรณ์พกพาและฉันต้องการปรับให้เหมาะสมฉันต้องการเฉพาะส่วนprefetchเท่านั้นฉันไม่ต้องการชิ้นส่วนประเมิน & ดำเนินการเพราะต่อมาเมื่อมีการโต้ตอบของผู้ใช้เกิดขึ้นฉันจะเริ่มการแยกวิเคราะห์ & ประเมินตนเอง ↑↑↑↑↑↑↑↑ฉันต้องการทริกเกอร์สองขั้นตอนแรกเท่านั้นภาพมาจากhttps://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑ ↑↑ แน่ใจว่าฉันสามารถทำได้โดยการเพิ่มลิงค์ …

9 javascript  webpack  lazy-loading  prefetch 

ฉันใช้ Vue CLI 3 และ Vuetify 2.1 ในโครงการใหม่ ish และค้นคว้าเมื่อเร็ว ๆ นี้เอาชนะตัวแปร SASS Vuetify ของ ในที่สุดหลังจากทำให้มันใช้งานได้ฉันก็ตระหนักว่าทุกครั้งที่ฉันแก้ไขvariables.scssไฟล์ที่ฉันสร้างและโครงการคอมไพล์ใหม่มันใช้เวลาประมาณ 5 นาทีในการรวบรวม ฉันพยายามอัปเดตสคริปต์ package.json เพื่อชนหน่วยความจำที่โหนดใช้และในขณะที่แก้ไขข้อผิดพลาดที่ฉันได้รับซึ่งทำให้คอมไพล์ขัดข้องผลก็คือเวลารวบรวมช้ามาก ความคืบหน้าที่แสดง (ฉันใช้ Foreman เพื่อรันทั้ง Rails API และเซิร์ฟเวอร์ Vue ของฉันในเวลาเดียวกัน) ดูเหมือนว่า: 17:47:29 web.1 | <s> [webpack.Progress] 69% building 916/930 modules 14 active /<path/to/app>/frontend/node_modules/css-loader/index.js??ref--9-oneOf-3-1!/<path/to/app>/frontend/node_modules/postcss-loader/src/index.js??ref--9-oneOf-3-2!/<path/to/app>/frontend/node_modules/sass-loader/lib/loader.js??ref--9-oneOf-3-3!/<path/to/app>/frontend/node_modules/vuetify/src/components/VSwitch/VSwitch.sass โหลดเหล่านี้ดำเนินต่อไปตามที่ฉันกล่าวถึงเป็นเวลาประมาณห้านาทีก่อนที่มันจะเสร็จสิ้นในที่สุด ฉันเดาว่าเพราะฉันปรับปรุงตัวแปรมันต้องผ่านและอัพเดตสไตล์นั้นสำหรับแต่ละองค์ประกอบและอินสแตนซ์ของตัวแปรนั้นใน Vuetify node_module คำถามของฉันคือว่ามีวิธีการเร่งนี้ บางทีฉันอาจตั้งค่าบางอย่างผิดปกติที่ทำให้เกิดปัญหานี้ หรือนี่เป็นเรื่องปกติโดยสิ้นเชิงและฉันจะต้องจัดการกับมันเหรอ? …

9 webpack  vuetify.js  vue-cli 

ฉันพัฒนาเว็บแอปพลิเคชัน SPA โดยใช้ ASP.Net Core React + Redux หลังจากอัปเดตเป็น. Net Core 3.0 ฉันเห็นว่า UseWebpackDevMiddleware และ AddNodeServices ล้าสมัย ฉันเรียนรู้เทมเพลตโครงการใหม่ React + Redux แต่ไม่ได้ใช้ webpack หรือ SSR 1) ฉันจะหาตัวอย่างหรือข้อมูลการทำงานกับ webpack ใน. Net Core 3.0 ได้ที่ไหน ด้วย UseWebpackDevMiddleware เป็นเรื่องง่ายที่จะกำหนดค่า HMR และสร้างเว็บแพค 2) ฉันจะหาตัวอย่างหรือข้อมูลเกี่ยวกับ SSR ด้วย. Net 3.0 + React ได้ที่ไหน?

9 webpack  server-side-rendering  .net-core-3.0  asp.net-core-3.0