TypeScript&Reactで新し目のECMAScriptを使いたいのですが、なかなかうまくいきません。
具体的には、bind operatorや、pipeline operatorを使ってみたいです。
いろいろ調べているとbabelを使えばできるっぽいというのを見つけたので入れみました。
【参考】: https://babeljs.io/blog/2015/05/14/function-bind
babelは新しい書き方のjsをブラウザでも対応できるjsにトランスパイルするという認識だったのですが、babel7からTypescriptに対応したみたいで入れてみました。
【参考】: https://babeljs.io/docs/en/babel-preset-typescript
// .babelrc { "presets": [ [ "@babel/preset-typescript", { "isTSX": true, "allExtensions": true, "jsxPragma": "React" } ], [ "@babel/preset-react", { "pragma": "React" } ] ] }
その後もissueなどを確認しながらいろいろいれてpackage.jsonの一部は以下のようになりました。
json
1// package.json 2 "devDependencies": { 3 "@babel/cli": "^7.1.2", 4 "@babel/core": "^7.1.2", 5 "@babel/preset-react": "^7.0.0", 6 "@babel/preset-typescript": "^7.1.0", 7 "@babel/register": "^7.0.0", 8 "@types/react": "^16.4.18", 9 "@types/react-dom": "^16.0.9", 10 "babel-cli": "^6.26.0", 11 "babel-loader": "^8.0.4", 12 "babel-preset-es2018": "^1.0.0", 13 "babel-preset-react": "^6.24.1", 14 "babel-runtime": "^6.26.0", 15 "react-addons-test-utils": "^15.6.2", 16 "ts-jest": "^23.10.4", 17 "tslint": "^5.11.0", 18 "typescript": "^3.1.3" 19 }
//tsconfig.json { "compilerOptions": { "baseUrl": ".", "outDir": "build/dist", "module": "esnext", "target": "es2018", "lib": ["es6", "dom"], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", "noUnusedLocals": true },
こうして、$ babel
コマンドでbabelを動かしてみても、tsxファイルは認識せず、jsファイルしかトランスパイルしてくれないので、おかしいと思いながらも以下のように対応しました。
src
ディレクトリ: tsxのreactのコンポーネントファイル
build/dist
ディレクトリ: typescriptコンパイラでsrc
からjs
にコンパイル
lib
ディレクトリ: 'build/dist`のjsファイルをbabelでjsファイルにトランスパイル
で、lib
を見るようにして、一応起動はしたのですが、結局目的だったpipeline operatorなどは使えませんでした。
そもそもこれは解決する方法はあるのでしょうか。
また、できる場合、一度の編集で2度もコードを変換するのはスマートではないように感じます。
どなたかご存知の方がいらっしゃればご教示願えませんでしょうか。
よろしくおねがいします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/10/24 14:27