초보자가 웹 스타터 키트를 사용하려고 했던 것을 공유하고 싶습니다.
3924 단어 npmgulpboilerplate초보자google
언제나처럼 여유 시간에 구구하고 있으면 "web-starter-kit"라는 구글 제의 편지지가 있다는 것을 알았습니다.
절대적인 구글 추종자의 저는 하나님 (구글)이 권고하는 것을 사용하지 않을 것입니다.
Google과 같은 사이트 에는 누구라도 간단하게 할 수 있게 써 있기 때문에 즉각 핥아 걸렸습니다.
그러나 실제로 해보면. . . .
$ gulp serve
이 커맨드가 움직일 때까지 에러 투성이로 굉장히 힘들었습니다.
비슷한 Google 신자가 같은 함정에 끼지 않도록 도움을 주시면 감사하겠습니다.
환경
도구 및 환경
버전
OS
Windows10
Node.js
v11.15.0 ☚대사
web-starter-kit
v0.6.5
결론
기본 패키지를 다음으로 다시 작성하면 마침내 작동했습니다.
.babelrc 다시 쓰기
{
- "presets": ["es2015"],
- // Remove the line below to enable ES2015 support.
- "only": "gulpfile.babel.js",
- "retainLines": true
+ "presets": ["@babel/preset-env"]
}
package.json 다시 쓰기
{
"devDependencies": {
- "babel-core": "^6.14.0",
+ "@babel/core": "^7.9.0",
- "babel-preset-es2015": "^6.0.15",
+ "@babel/preset-env": "^7.9.0",
+ "@babel/register": "^7.9.0",
+ "babel-jest": "^25.2.3",
+ "babel-loader": "^8.1.0",
+ "jest": "^25.2.3",
+ "node-sass": "^4.13.1",
+ "regenerator-runtime": "^0.13.5",
+ "sass": "^1.26.3"
},
+ "resolutions": {
+ "babel-core": "7.0.0-bridge.0"
+ },
}
오류와 같은 일
Uncaught SyntaxError: Cannot use import statement outside a module
먼저 gulp 명령을 실행하고 gulp.babel.js를로드 할 때 발생한 오류입니다.
위와 같이 .babelrc를 다시 쓰면 해결되었습니다.
이유는 알 수 없습니다
아마 babel7.0에서 바베 하면 나올 것이라고 해석했을 것입니다.
자세한 분, 보충하실 수 있으면 눈물 나옵니다
참조 기사 : babel-preset-es2015 -> babel-preset-env
AssertionError [ERR_ASSERTION]: Task function must be specified
Node.js와 gulp이 버전에 따라 궁합이 나쁜 것 같고 그 때문에 나온 것 같습니다.
처음에는 gulp를 4.0으로 올려 보았지만 다른 오류가 웃어서 결국 Node.js 버전을 낮췄습니다.
에러와 대책의 상세한 것은 참조 기사로 정리해 주시고 있으므로, 그쪽을 봐 주세요
참조 기사:Gulp 환경 구축에서 「AssertionError [ERR_ASSERTION]: Task function must be specified」의 원인은 gulp v4로 버전 업한 것에 의한 사양 변경
Requires Babel “7.0.0-0” but was loaded with “6.26.3”
어쨌든 빠졌습니다.
종속성이 나쁜 것 같습니다.
다음 대책으로 마침내 대처할 수있었습니다.
참조 기사:Requires Babel “7.0.0-0” but was loaded with “6.26.3” #8482
요약
위의 대책으로 겨우 명령 실행할 수 있었습니다.
gulp라는 단어를 처음 들었을 정도의 초보자가 한 일이므로, 잘못된 일이나 쓸데없는 일도 있을까 생각합니다.
정정하겠습니다 때문에, 눈치채신 분 지적 받을 수 있으면 다행입니다.
끝까지 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(초보자가 웹 스타터 키트를 사용하려고 했던 것을 공유하고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/MlSoku/items/8b6145a183d4b6a91d5c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)