impulse
1.0.0
코드를 포기하지 않고도 브라우저에서 최신 웹 사이트를 바로 구축하십시오.
Impulse.Vev | 불화
@krogovoy와 @ivolchenskov에 의해 만들어졌습니다
Impulse는 Dev 모드 (LocalHost에서 실행)에서 React 웹 사이트와 협력하도록 만들어졌습니다.
브라우저에서 UI를 바로 편집하면서 수동으로 코드를 자동으로 변경할 수 있습니다. 코드 편집기를 뛰어 넘는 코드 편집기 확장자와 같습니다.
? Impulse.dev에서 데모를 참조하십시오
수동으로 코드 작성과 비교 :
언어 :
렌더링 라이브러리 :
반응 프레임 워크 및 번들러 :
CSS 프레임 워크 :
브라우저 :
(Impulse는 크롬 기반 브라우저에서만 잘 작동하는 파일 시스템 액세스 API에 의존합니다)
편집기 통합 :
충동을 시도하는 세 가지 방법이 있습니다.
아래 코드를 브라우저의 콘솔에 복사하여 붙여 넣습니다.
d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )아무것도 설치하지 않고 도구로 재생하는 쉬운 방법이지만 페이지를 새로 고치면 사라집니다.
전체 팀을 위해 한 번에 설정하십시오.
npm i -D @impulse.dev/runtime@latest 항상 가져 오는 파일에 붙여 넣습니다. 일반적으로 _app.jsx 은 "메인"반응 파일입니다.
if ( process . env . NODE_ENV === 'development' ) {
import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
} <body> 끝에이 스크립트 태그를 붙여 넣으십시오
{
process . env . NODE_ENV === 'development' && (
< script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
)
}중요 : 생산 빌드에서 충동을 배송하지 않도록하십시오! 번들 크기를 부풀릴 것입니다!
대부분의 Bundlers는 if (process.env.NODE_ENV === 'development') { ... } 내부의 모든 코드를 잘라 내지 만 생산 빌드를 만들고 번들 크기를 이전과 비교하는 것이 좋습니다.
일단 설치되면 임펄스는 작업 할 준비가되었습니다. 다음은 충동을 가장 잘 작동시키기 위해 설정하고 싶은 것들입니다.
Brave를 사용하는 경우 파일 시스템 액세스를 활성화합니다. API :
file system access api 검색하십시오Impulse는 브라우저를 사용하는 것과 동일한 컴퓨터에서 개발 환경을 실행하는 경우에만 작동합니다. 임펄스는 다른 컴퓨터에서 파일을 편집 할 수 없기 때문에 원격 환경에서는 작동하지 않습니다.
보안상의 이유로 파일 시스템 액세스 API는 http : //가 사용될 때만 localhost 에만 작동합니다. 환경이 로컬이더라도 다른 호스트 이름을 사용하는 경우 :
Insecure origins treated as secure 검색하십시오임펄스는 코드를 편집합니다. 기본적으로 최소한의 변경을 최소화하는 것이 최선을 다합니다.
그러나 코드를 형식화하는 방법은 실제로 모릅니다.
각 코드를 변경 한 후 (권장) 더 예쁘게 사용하려면 config를 run() 로 전달하십시오.
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ prettierConfig: require('./path_to/.prettierrc.js')
+ }))
} Tailwind에서 표준 테마를 확장 한 경우 tailwind.config.js run() 로 전달하십시오.
if (process.env.NODE_ENV === 'development') {
- import('@impulse.dev/runtime').then((impulse) => impulse.run())
+ import('@impulse.dev/runtime').then((impulse) => impulse.run({
+ tailwindConfig: require('./path_to/tailwind.config.js'),
+ }))
}
할 수있는 일 :
<div></div> 삽입하십시오요구 사항 :
레포를 복제하십시오 :
git clone [email protected]:impulse-oss/impulse.git && cd impulse종속성 설치 :
npm install개발 서버 실행 :
npm run devhttp : // localhost : 3005/. 이것은 앱을 개발하고 테스트하기위한 놀이터입니다.
