gatsby develop
λ μμ μ€λ₯λ₯Ό λ°νν©λλ€.
λ΄ μ’ μμ±, λͺ¨λ λ° νμ΄μ§λ₯Ό 볡μ¬νκ³ μ¬κΈ°μ κ°μ΄λλ₯Ό λ°λΌ μ¬μ΄νΈλ₯Ό v2μμ v2λ‘ μ κ·Έλ μ΄λνμ΅λλ€. https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.3 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.4.0 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.106
Safari: 11.1.2
npmPackages:
gatsby: 2.0.0-rc.9 => 2.0.0-rc.9
gatsby-plugin-canonical-urls: ^2.0.0-rc.1 => 2.0.0-rc.1
gatsby-plugin-google-tagmanager: ^2.0.0-rc.1 => 2.0.0-rc.1
gatsby-plugin-manifest: next => 2.0.2-rc.1
gatsby-plugin-offline: next => 2.0.0-rc.2
gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1
gatsby-plugin-remove-trailing-slashes: ^2.0.0-rc.1 => 2.0.0-rc.1
gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0
gatsby-plugin-sitemap: ^2.0.0-rc.1 => 2.0.0-rc.1
gatsby-plugin-styled-components: ^3.0.0-rc.1 => 3.0.0-rc.1
gatsby-source-apiserver: ^1.3.1 => 1.3.1
gatsby-source-filesystem: ^2.0.1-rc.1 => 2.0.1-rc.1
gatsby-source-wordpress: ^3.0.0-rc.1 => 3.0.0-rc.1
gatsby-transformer-javascript-frontmatter: ^2.0.0-rc.2 => 2.0.0-rc.2
gatsby-transformer-json: ^2.1.1-rc.1 => 2.1.1-rc.1
npmGlobalPackages:
gatsby-cli: 1.1.58
babel-preset-env
μ€μΉνκ³ node_modulesλ₯Ό μμ νκ³ λ€μ μ€μΉνλ €κ³ νμ΅λλ€.
μ κΈ νμΌ(yarn.lock/package-lock.json)κ³Ό node_modulesλ₯Ό μμ νκ³ λ€μ μ€μΉν΄ λ³Ό μ μλμ?
κ°μ¬ν©λλ€ Pieh μ μλνμ΅λλ€.
μ€μ λ‘ npm install --save core-js
μ€ννμ¬ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νμ΅λλ€.
μμ²λ!
μ¬μ ν μ 체 μ€λ₯ μΆλ ₯μ΄ μμ΅λκΉ(μ€ν μΆμ ν¬ν¨)? μ΄κ²μ΄ gatsby
κ΄λ ¨μ΄κ³ μΈ λ²μ§Έ ννΈ ν¨ν€μ§ μ€ νλμ λ¬Έμ κ° μλ€λ©΄ μμ νλ κ²μ΄ μ’μ κ²μ
λλ€.
Pieh λλ κ°μ λ¬Έμ κ° μμκ³ 7.0.0 λ² ν λ²μ μμ core-js μ’ μμ±μ μ κ±°ν babelλ‘ μ νν μ§μ ν ν μ΅μ’ λ²μ μ λ€μ κ²μνμ΅λλ€.
@kmorf μ μ°Ύμμ΅λλ€! λλ κ°μ λ¬Έμ κ°μλ€.
Pieh λλ κ°μ λ¬Έμ κ° μμκ³ 7.0.0 λ² ν λ²μ μμ core-js μ’ μμ±μ μ κ±°ν babelλ‘ μ νν μ§μ ν ν μ΅μ’ λ²μ μ λ€μ κ²μνμ΅λλ€.
λ§μ, μ΄κ±΄ gatsby
κ³ μΉ μ μλ κ±° μλμΌ?
λνμ΄ μ€λ₯λ λ Έλ λλ λΈλΌμ°μ μμ λ°μν©λκΉ? μ΄κ²μ΄ μ€μ λ‘ μ¬κΈ°μμ λ¬Έμ κ° λμ΄μΌ νλ κ²μΈμ§ λλ μ°λ¦¬κ° μ μ΄ν μ μλ μ μ€νΈλ¦Όμμ λ°μν κ²μΈμ§ μκΈ° μν΄ μ¬κΈ°μ λ λ§μ μ λ³΄κ° νμ€ν νμν©λλ€./
gatsby
μμ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νλ €κ³ ν΄μλ μ λλ€κ³ μκ°ν©λλ€. μ΄ μΌμ΄ λ°μνμ λ λ§μ λ€λ₯Έ React νλ‘μ νΈκ° μ€ν¨νμ¬ μ¬μ©μκ° devDependenciesμ core-js
λ₯Ό μΆκ°νμ΅λλ€. babel 7.0.0
κ° μΆμλ μ΄νλ‘ μ΄ λ¬Έμ κ° λ°μνμ§ μμμ΅λλ€.
μΌλ¨ μ΄κ²μ λ«μ (λ€μ :))
λλ μ§κΈ λ¬Έμ μ λ€μ λΆλͺμΉλ€. λ΄ gatsby-node.js
μ 컀λ°μ 첨λΆνκ³ μμ΅λλ€. λλ λ΄κ° μ¬μ© λ μ€λ₯λ₯Ό μ°Ύμ κ² κ°μ _.each
λμ .forEach
.
μ λ μ΄ λ¬Έμ μ μν₯μ λ°μκ³ @babel/polyfill
ν¨ν€μ§μ λν Babel 7 λ³κ²½ μ¬νμΌλ‘ λ€μ μ΄μ΄μ§ μ μλ€κ³ μκ°ν©λλ€. λν νμ¬ λΆμμ λν μμΈν μ€λͺ
μ mdx-js/mdx#271μ μ°Έμ‘°νμμμ€. νμ¬ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν μ μλ μ μΌν ν΄κ²° λ°©λ²μ μμ λ§ν¬λ λ§μ΄κ·Έλ μ΄μ
κ°μ΄λμ μ€λͺ
λ λλ‘ μ΄μ core-js
v2 ν¨ν€μ§μ νλ‘μμ λΆκ³Όν @babel/polyfill
λ₯Ό dev μ’
μμ±μΌλ‘ μΆκ°νλ κ²μ
λλ€. .
μ λ μ΄ λ¬Έμ λ₯Ό λ³΄κ³ μμΌλ©° μ΅κ·Ό Babelμ λ³κ²½μΌλ‘ μΈν΄ λΉλκ° μ€λ¨λμμμ νμΈν μ μμ΅λλ€. μ΄μ Gatsbyμμ μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν μ μλ λ°©λ²μ μ‘°μ¬νκ³ μμ΅λλ€. ( core-js
λ₯Ό devDependencies
ν΄λ λ΄κ° μ μ μλ λΉλμλ μ무 ν¨κ³Όκ° μμμ΅λλ€.)
@secretfader @babel/polyfill
λ₯Ό devDependencies
μ μΆκ°νλ©΄ νμν core-js
ν΄λ¦¬νμ΄ μλμΌλ‘ λ‘λλ©λλ€. node_modules
ν΄λμ package-lock.json
νμΌμ μμ νκ³ npm install
λ₯Ό μ€ννμ¬ κΉλνκ² ν΄κ²°λ μ’
μμ± νΈλ¦¬λ‘ μμνμμμ€.
λ¬Έμ λ₯Ό μ¬νν μ μμ΅λλ€. 볡μ μ μ₯μλ₯Ό μ°Ύκ³ μλ€λ©΄ https://github.com/mui-org/material-ui/blob/master/examples/gatsby/README.md κ° μ’μ΅λλ€.
@secretfader
@babel/polyfill
λ₯ΌdevDependencies
μ μΆκ°νλ©΄ νμνcore-js
ν΄λ¦¬νμ΄ μλμΌλ‘ λ‘λλ©λλ€.node_modules
ν΄λμpackage-lock.json
νμΌμ μμ νκ³npm install
λ₯Ό μ€ννμ¬ κΉλνκ² ν΄κ²°λ μ’ μμ± νΈλ¦¬λ‘ μμνμμμ€.
"@babel/polyfill": "^7.0.0",
νκ³ ν΄λΉ μ§μΉ¨μ λ°λ₯΄λ κ²μ ν¨κ³Όκ° μμμ΅λλ€.
core-jsλ₯Ό μΆκ°νλ©΄ npm install --save core-js
.
@ben-rogerson package-lock.json
μ κ±°ν ν μ€λ₯κ° λ€μ λ°μνκΈ° λλ¬Έμ λ΄ μ견μ μ
λ°μ΄νΈνμ΄μΌ νμ΅λλ€. μ’
μμ±μ΄ μ¬λ°λ₯΄κ² ν΄κ²°λμ§ μμ κ²μ²λΌ 보μ΄μ§λ§ μμ΄λ¬λνκ²λ κ·Έλ κ² ν νμλ μλνμ΅λλ€. λλλ‘ npm
λ 무μ§κ° μ λμ½μ λ―Έμ€ν°λ¦¬μ
λλ€ :roll_eyes: λν mdx-js/mdx#271μμ λ©μΈν
μ΄λλ npm
μμ μλνμ§ μλλ€κ³ κ²μνμ§λ§ yarn
λͺ¨λ κ²μ΄ μ μ€νλ©λλ€.
core-js
λλ @babel/polyfill
λ₯Ό μ’
μμ±μΌλ‘ μΆκ°ν λ κ²°κ³Όλ₯Ό κ°μ§κ³ λμ§λ§ core-js
κ° μ΄λ―Έ gatsby
ν΅ν΄ ν΄κ²°λμμΌλ―λ‘ λμ€μ μλνλ μ΄μ κ° κΆκΈν©λλ€. devDependencies
μ루μ
κ°μ μ°¨μ΄κ° μμ΅λλ€.
μ°Έκ³ λ‘, μ΅κ·Όμ Gatsby μ¬μ΄νΈ μ€ νλμμ Yarnμμ NPMμΌλ‘ μ ννλλ° μ΄ λ¬Έμ κ° λ°μνμ΅λλ€.
@arcticicestudioκ° λ§νλ―μ΄ gatsby
core-js
λ₯Ό μ’
μμ±μΌλ‘ λμ΄νλ€λ μ μμ νΉν μ΄μν΄ λ³΄μ
λλ€.
μΆκ° μ 보: .cache, node_modules λ° package-lock.jsonμ μ 리νκ³ npmμ ν΅ν΄ λͺ¨λμ λ€μ μ€μΉν ν
WebpackError: Cannot find module 'core-js/modules/es6.array.sort'
core-jsλ₯Ό μ€μΉνλ©΄ λ¬Έμ κ° μ§μ ν΄κ²°λ©λλ€.
μμ¬ μΆκ° core-js
μ¬μ ν node_modulesλ₯Ό μμ ν μ μμΌλ©΄ yarnμ μ¬μ©νμ¬ μ€μΉνκ³ cnpmμ μ¬μ©νμ¬ μ€μΉνμ§ λ§μμμ€.
λλ λνμ΄ λ¬Έμ μ μ§λ©΄ ν΄μλ€.
μλ μ λ Storybook λ²μ 5.1.0-alpha.X
μμμ΅λλ€. yarn why core-js
μ€ννλ©΄ core-js
( core-js
νΈμ΄μ€νΈλ λ²μ )μ μ§λ°°μ μΈ λ²μ μ 2.6.5
μ
λλ€.
λνλ‘ μ
λ°μ΄νΈ ν ν 5.1.0-beta.0
μ€λμ κ²μ λ²μ core-js
λμλ€ 3.0.1
, κ·Έλ¦¬κ³ κ°μΈ λΉ λΉλλ₯Ό λΆλ¬ λͺ κ°μ§ μ΄μ μ λν΄.
Gatsbyκ° μ’
μμ±μμ core-js
μ μ€μ λ²μ μ νμΈνμ§ μλ μ΄μ λ 무μμ
λκΉ?
core-js
λ₯Ό devDependencies
μ§μ μΆκ°νλ ν΄κ²° λ°©λ²μ μλνμ§λ§ λ¬Έμ κ° ν΄κ²°λμ§ μμμ΅λλ€.
λλ κ°μ λ¬Έμ κ° μμλ€.
λ΄ core-js
λ²μ μ 2.6.5
(κ°λ° μ’
μμ±)μΌλ‘ λ€μ΄κ·Έλ μ΄λνλ©΄ λ¬Έμ κ° ν΄κ²°λμμ΅λλ€.
λ λ μ΄μ μλνμ§ μμ΅λλ€.npm install --save core-js
λμ npm install --save --dev [email protected]
μ¬μ©νμμμ€.
κ·Έλ¬λ μ μμ μΌλ‘ μ μ₯νμ§ μλλ‘ νλ‘μ νΈ λλ ν 리μμ npm install --dev [email protected]
λ₯Ό μ€ννμμμ€.
μ΄μ μ΄ μλνμ§ μμΌλ©΄ λ€μμ μ¬μ©νμμμ€.
npm install --save [email protected] -g
μ΄κ²μ μλνμ§λ§ νμ§ λ§μμμ€.
μ΄ λ¬Έμ μ μμΈμ μ²μμ yarn
μμλ νλ‘μ νΈλ₯Ό μ
λ°μ΄νΈνκ³ μμ
νκΈ° μν΄ npm
λ₯Ό μ¬μ©νκΈ° λλ¬Έμ΄λΌκ³ κ°μ ν©λλ€. λ°λΌμ μλ§. arcticicestudioκ° μ§μ ν κ²μ²λΌ.*
μ΄μ μ΄ μλνμ§ μμΌλ©΄ λ€μμ μ¬μ©νμμμ€.
npm install --save [email protected] -g
κ·Έλ¬ν ν¨ν€μ§λ₯Ό μ μμ μΌλ‘ μ€μΉνλ κ²μ μ λ§ λμ μκ°μ΄λ©° κ·Έλ κ² ν μ΄μ κ° μμ΅λλ€. λ‘μ»¬λ‘ μ€μΉν λ(κ³ μ λ λ²μ μ¬μ©) λ¬Έμ κ° μλ κ²½μ° νμ¬ μΆ©λμ μΌμΌν€λ λ€λ₯Έ ν¨ν€μ§λ₯Ό μ΄λ―Έ μ μμ μΌλ‘ μ€μΉνκΈ° λλ¬ΈμΌ μ μμ΅λλ€.
μ΄ ν°μΌμ κ°μ₯ ν° λ¬Έμ λ npm
μ
λλ€. μ’
μμ± νΈλ¦¬λ₯Ό μ¬λ°λ₯΄κ² ν΄κ²°νμ§ λͺ»νλ κ² κ°μ΅λλ€. μλ
μ yarn
λ‘ μ ννμΌλ©°(μ£Όλ‘ _workspaces_ λλ¬Έμ) λ€μλ λ¬Έμ κ° λ°μνμ§ μμμ΅λλ€. _npm_ μ¬μ©μλ λ²μ μ κ³ μ νμ¬ ν΄κ²° λ°©λ²μ μ¬μ©ν΄μΌ νλ©° _npm Roadmap Summer 2019_ λΈλ‘κ·Έ κ²μλ¬Όμμ λ°νλ _npm_ 8(μλ‘μ΄ tink λΌμ΄λΈλ¬λ¦¬λ‘ ꡬλλ¨)μ΄ μ΄λ¬ν λ¬Έμ λ₯Ό μμ νκΈ°λ₯Ό λ°λλλ€(λλ yarn
_Gatsby_ κΈ°λ° νλ‘μ νΈμ κ²½μ°
κ°μ¬ν©λλ€ Pieh μ μλνμ΅λλ€.
μ€μ λ‘
npm install --save core-js
μ€ννμ¬ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νμ΅λλ€.
μ΄ λλΆμ μλνμ΅λλ€!
κ°μ₯ μ μ©ν λκΈ
κ°μ¬ν©λλ€ Pieh μ μλνμ΅λλ€.
μ€μ λ‘
npm install --save core-js
μ€ννμ¬ μ΄ λ¬Έμ λ₯Ό ν΄κ²°νμ΅λλ€.