안녕하세요!
Discourse 테마/플러그인에서 npm 패키지(package.json 또는 유사한 방식으로)를 설치할 수 있을까요? 여러 앱에서 일부 컴포넌트를 재사용하려고 하는데, 불가능하다면 진행에 장애 요인이 될 수 있습니다.
감사합니다!
핵심(core)에서 하는 방식처럼, package.json을 통해 npm 패키지를 추가한 후 JS 파일을 테마 폴더(예: javascripts/discourse/lib/)로 복사하는 방식으로 처리할 수 있습니다. 다만 node_modules에서 패키지를 직접 import하는 것은 불가능할 것 같습니다.
순수 JavaScript 코드(예: 커스텀 웹 컴포넌트를 지원하기 위해 포함하고 실행할 수 있는 코드)를 이처럼 가지고 있다고 가정할 때, 당신의 방식으로 이를 실행하는 방법은 무엇인가요? 코드를 테마의 discourse/lib 폴더에 복사해서 붙여넣어도 작동하지 않습니다.
제가 추측하기로는, 페이지가 로드될 때 브라우저 환경에서 호출되지 않기 때문에, 즉 “올바른 시점에 호출되지 않기 때문에” 작동하지 않는 것 같습니다.
또한, 맥락을 제공하기 위해 https://unpkg.com/를 사용하여 헤더에 포함시키려 하면 다음과 같은 오류가 발생합니다:
댓글에 답변을 남기고 하나의 아이디어로 정보를 전달한 후, DISCOURSE_CDN_URL causes content security policy violations? 를 참고하여 content_security_policy 설정을 비활성화함으로써 오류를 제거했습니다.
content_security_policy설정 끄기
다른 오류가 있어 스크립트가 작동하지 않는 이유를 아직 파악하지 못했지만, 지금까지의 내용은 다른 분들에게 도움이 될 수 있을 것 같습니다.
참고로 제가 겪고 있는 오류는 다음과 같습니다:
하지만 스크립트는 로드되었습니다 
마침 같은 퀘스트에 있는 사람을 찾았네요. 저는 다음과 같이 해결했습니다:
content_security_policy설정을 끄기- 스크립트를 명시적으로 프로그램 방식으로 추가하기 (
$.getScript나 다른 방법을 사용하지 않음).
제가 성공적으로 작동하게 한 예시 요약 스니펫은 다음과 같습니다 (웹 컴포넌트는 상황에 맞게 대체하세요):
import { withPluginApi } from "discourse/lib/plugin-api";
let flag = false;
export default {
name: "web-component",
initialize() {
withPluginApi("0.8", api => {
api.onAppEvent("page:changed", () => {
if (flag) return;
addScript(
"https://unpkg.com/web-component@0.0.1/dist/web-component/web-component.js",
{ defer: "", crossorigin: "anonymous" }
);
addWebComponent(
"web-component",
{
id: "web-component"
},
`Hello world`
);
flag = true;
});
});
}
};
function addWebComponent(tag, attrs, content) {
var component = document.createElement(tag);
Object.keys(attrs).forEach(key => {
component.setAttribute(key, attrs[key]);
});
component.textContent = content;
document.body.appendChild(component);
}
function addScript(src, attrs) {
var script = document.createElement("script");
script.setAttribute("src", src);
Object.keys(attrs).forEach(key => {
script.setAttribute(key, attrs[key]);
});
document.body.appendChild(script);
}
이 작업을 수행하는 더 나은 방법은 content securty policy script src 사이트 설정이나 테마 컴포넌트에서 해당 특정 URL을 화이트리스트에 추가하는 것입니다. 자세한 내용은 Content Security Policy를 사용하여 XSS 공격 완화하기를 참고하세요.
또한 import loadScript from "discourse/lib/load-script";를 가져온 후 이를 사용하여 외부 스크립트를 로드할 수 있습니다(자신의 addScript 인젝터를 정의하는 대신).
이 스레드를 부활시켜서 죄송합니다. 하지만 제가 찾을 수 있는 가장 관련성이 높은 스레드입니다.
플러그인에 이 패키지를 추가하려고 합니다. import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'를 사용하여 가져오기를 하고 싶습니다.
Yarn에서도 사용 가능한데, Discourse가 Yarn을 사용한다고 생각하지만 단순히 의존성으로 추가할 수 있을지 확신이 서지 않습니다..가능할까요?
의존성이 많아서 unpkg로 로드하는 것도 어려울 것 같습니다. 어떤 옵션이 있을까요? 조언을 주시면 감사하겠습니다.
너무 포괄적인 질문을 해서 죄송합니다. 정말 혼란스럽습니다. 감사합니다!