์ ๊ฐ Angular 4.4.4
๋ฅผ ์ฌ์ฉํ๊ณ ์์ด์ #4216๊ณผ ๊ด๋ จ์ด ์๋์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง React
์ด์๋ผ์ ๋ณ๋ ์ด์๋ก ์ฌ๋ฆฝ๋๋ค.
์ ๋ฐ์ดํธ ํ ๋ค์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
__WEBPACK_IMPORTED_MODULE_2_moment__ is not a function
๋ค์ moment
ํจํค์ง๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
"moment": "2.19.0",
"@types/moment": "2.13.0",
์ค๋ฅ๊ฐ ๋ฐ์ํ๋ ์ฝ๋๋ ๋งค์ฐ ๊ฐ๋จํฉ๋๋ค.
import * as moment from 'moment';
...
if (moment().year() !== this.mainData.activeYear)
...
+1 - Angular 4์ ๋์ผํ ๋ฌธ์
์ฌ๊ธฐ๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค. Angular ๋๋ React๋ฅผ ์ฌ์ฉํ์ง ์์ต๋๋ค. ์ด๊ฒ์ ๋ด ์นํฉ ์ค๋ฅ์ ๋๋ค.
WARNING in ./~/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '/data/jenkins/workspace/project/node_modules/moment/src/lib/locale'
./~/moment/src/lib/locale/locales.js 65:16-60
./~/moment/src/lib/locale/locale.js
./~/moment/src/moment.js
./script.js
vuejs ๋ฐ webpack๊ณผ ๋์ผํ ๋ฌธ์ ์ ๋๋ค.
๋ฌธ์ ๋ moment-timezone์ ์ํด ํธ๋ฆฌ๊ฑฐ๋์ง๋ง webpack๊ณผ ๋์ผํฉ๋๋ค. ์์กด์ฑ์ "moment": "^2.18.1"
์์ "moment": "~2.18.1"
๋ก ๋ณ๊ฒฝํ์ต๋๋ค.
๋ฒ์ 2.19.0์ผ๋ก ์๊ฐ ์
๊ทธ๋ ์ด๋ํด๋ ๋์ผํ ๋ฌธ์
WARNING in ./~/[email protected]@moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '/Users/XXX/code/gitlab/web-editor/node_modules/[email protected]@moment/src/lib/locale'
@ ./~/[email protected]@moment/src/lib/locale/locales.js 65:16-60
@ ./~/[email protected]@moment/src/lib/locale/locale.js
@ ./~/[email protected]@moment/src/moment.js
@ ./~/[email protected]@antd/lib/calendar/index.js
@ ./~/[email protected]@antd/lib/index.js
@ dll lib
2.19.0๊ณผ ๋์ผํ ๋ฌธ์
์ด 2.19.0
๋ฒ์ ์ ๋์ผํ ๋ฌธ์
์ด ๋ฒ์ (2.19.0์ ์์ ๋์ด์ผ ํจ)
'์๊ฐ' ์ํํ, 2.18.1์ ์ค์นํ์ญ์์ค
"์๊ฐ": "~2.18.1"
์ฌ๊ธฐ์์๋ ๊ฐ์ ๋ฌธ์ ๐ข ์ด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋ ๋๊น์ง 2.18๋ก ๋ค์ ๋ค์ด๊ทธ๋ ์ด๋ํฉ๋๋ค.
์ฌ๊ธฐ๋ ๊ฐ์ ๋ฌธ์ ...
์นํฉ ์ค๋ฅ์ ๋ฐ์
WARNING in ./node_modules/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in 'blahblahblah/node_modules/moment/src/lib/locale'
@ ./node_modules/moment/src/lib/locale/locales.js 65:16-60
@ ./node_modules/moment/src/lib/locale/locale.js
@ ./node_modules/moment/src/moment.js
@ ./src/client/components/ArticlesGrid/index.js
@ ./src/client/containers/StuffPage/index.js
@ ./src/client/routes.jsx
@ ./src/client/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8050 webpack/hot/dev-server babel-polyfill ./src/client/index.js
@mymtw - ์ปค๋ฎค๋ํฐ๋ก์ ์์์ ๋ํ ์์ค์ ํ์ฉํ์ง ์์ผ๋ฏ๋ก ๊ทํ์ ์๊ฒฌ์ด ์ ๋ฐ์ดํธ๋์์ต๋๋ค. ์์ผ๋ก๋ ์์ ๋ถํ๋๋ฆฝ๋๋ค.
2.19๋ก ์ ๊ทธ๋ ์ด๋ ํ ํ ์ด๊ฒ์ ์ป์์ต๋๋ค ...
node_modules/webpack/lib/IgnorePlugin.js:20
(!contextRegExp || contextRegExp.test(result.context))) {
^
TypeError: contextRegExp.test is not a function
๊ทธ๋ฆฌ๊ณ ๋ด webpack ๊ตฌ์ฑ ํ์ผ์์ ๋ก์ผ์ผ์ ๊ฑด๋๋ฐ๊ธฐ ์ํด ๋ฌด์ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํฉ๋๋ค.
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/])
package.json
์ moment ๋ฒ์ ์ ์ ๊ทธ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋์์ด ๋ฉ๋๋ค.
"moment": "2.18.0"
๊ทธ๋ฌ๋ ์ข
์์ฑ์์ ์ต์ ๋ชจ๋ฉํธ ๋ฒ์ (2.19.0)์ ๊ฐ์ ธ์ค๋ ๊ฒฝ์ฐ ์์ ๋ด์ฉ์ด ์๋ํ์ง ์์ต๋๋ค( find ./node_modules/*/node_modules -iname moment
๋ฅผ ์คํํ์ฌ ์ฑ์์ ๋ชจ๋ฉํธ์ ๋ค๋ฅธ ๋ฒ์ ํ์ธ).
๋์ webpack ์ธ๋ถ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
+ externals: {
+ moment: 'moment',
+ },
<script src="https://momentjs.com/downloads/moment.min.js"></script>
๋น๋ถ๊ฐ ์ด๊ฒ์ ์ฐํํ๋ ~2.18.0
๋ก ๋ค์ด๊ทธ๋ ์ด๋๋์์ต๋๋ค.
๋ค์์ ๋๋ฅผ ์ํด ์๋ํ๋ ์ฌ์์ฐ ๋จ๊ณ์
๋๋ค. ์ ์ธ๊ณ์ ์ผ๋ก create-react-app
๊ฐ ์ค์น๋์ด ์๋ค๊ณ ๊ฐ์ ํฉ๋๋ค.
> create-react-app my-app
> cd my-app
> # Prove the app it working correctly
> npm run start
> npm install moment
src/app.js
๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ์
๋ฐ์ดํธํ์ญ์์ค.
import '.App.css';
+ import moment from 'moment'
class App extends Component {
</p>
+<p>
+ Today is {moment().format()}
+</p>
</div>
๊ทธ ๋ค์์
> npm run start
์น์ฌ์ดํธ๊ฐ ๋ก๋๋ ๊ฒ์ผ๋ก ์์ํฉ๋๋ค.
์ค์ , ์ค๋ฅ์ ํจ๊ป ์คํจ: './locale' ์ค๋ฅ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
์ถ๊ฐ ์ปจํ ์คํธ, ์ํ ํ ์๋
> npm install [email protected]
์ด๊ฒ์ ํฅ๋ฏธ ๋กญ๋ค. ๋๋ ๋ด ์์ ์ ์ํด ์์ ํ๋ ๋ด ์์ ์ ์ฝ๋์์ ์๊ฐ์ ์ ๋ฐ์ดํธํ๊ณ webpack์ ์์ํ์ต๋๋ค. ๋ด๊ฐ ๋งํ ์ ์๋ ํ ๋๋ ๋ชจ๋ ์นํฉ ์ข ์์ฑ(์ฌ๋ฌ ๊ฐ์ง๊ฐ ์์ผ๋ฉฐ ๋ช ๊ฐ๋ง ํ์ธํจ)๊ณผ 2.19.0 ์๊ฐ์ ์ต์ ๋ฒ์ ์ด ์์ผ๋ฉฐ ๋ชจ๋ ๊ฒ์ด ์ ์์ ๋๋ค.
๋ค์์๋ ์ด create-react-app ๊ฒฝ๋ก๋ฅผ ์ฌ์ฉํด ๋ณด๊ฒ ์ต๋๋ค.
์ด ์ค๋ฅ๋ก ์ธํด ์ค๋์ ๊ทธ๋ค์ง ํ๋ณตํ ์์นจ์ด ์๋์์ต๋๋ค!
์ด ์ค๋ฅ์ ๋ํด์๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค.
npm install --save [email protected]
์ด๊ฒ์ ๋น๋ถ๊ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค. 2.19.0์ ์ฝ 2์๊ฐ ์ ์ ๋์ผํ ์ค๋ฅ๋ฅผ ์ ๊ณตํ์ต๋๋ค.
๋ฒ์ 2.18.1 ๋ก ๋ค์ด๊ทธ๋ ์ด๋ํ๊ณ ์ ๋๋ก ์๋ํ์ต๋๋ค.
์ฐ๋ฆฌ๋ ๋ํ ์ด ์๋๋ฆฌ์ค๋ฅผ ํ์ฆํ ์ ์์ต๋๋ค.
2.19.0์ด ์ฐ๋ฆฌ์ ํ๋ก๋์ ๋น๋๋ฅผ ๋ง๊ฐ๋จ๋ ธ์ต๋๋ค :(. 2.18.1๋ก ๋๋๋ฆฌ๋ ๊ฒ์ ์ ์๋ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
#4216์ ๋ณต์ ๋ณธ์ผ๋ก ๋ซ๊ธฐ - ๊ฑฐ๊ธฐ์์ ์ถ์ ํ์ธ์.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฌ๊ธฐ๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค. Angular ๋๋ React๋ฅผ ์ฌ์ฉํ์ง ์์ต๋๋ค. ์ด๊ฒ์ ๋ด ์นํฉ ์ค๋ฅ์ ๋๋ค.