回答編集履歴
2
babelとBigIntの関係について追記
test
CHANGED
@@ -88,3 +88,10 @@
|
|
88
88
|
],
|
89
89
|
```
|
90
90
|
|
91
|
+
## 追記2
|
92
|
+
※ここからの内容は今調べました。
|
93
|
+
|
94
|
+
babelがBitIntの変換をサポートしていないからです。変換パフォーマンスの低下を避けることが理由のようです。
|
95
|
+
前の追記ではサポートブラウザバージョンの指定を提案しましたが、BigIntの計算を行う場合はネイティブのBitIntと同様の動作をするライブラリ[JSBI](https://github.com/GoogleChromeLabs/jsbi)を使用したほうが良いかもしれません。
|
96
|
+
|
97
|
+
|
1
解決策の追記
test
CHANGED
@@ -1,5 +1,3 @@
|
|
1
|
-
※React及びNextの内部仕様には詳しくないため間違っている可能性があります。
|
2
|
-
|
3
1
|
## 元ソース
|
4
2
|
```jsx
|
5
3
|
const bigIntRadix = BigInt(9007199254740991);
|
@@ -15,7 +13,7 @@
|
|
15
13
|
|
16
14
|
## ビルドした場合
|
17
15
|
`next build`や`react-scripts build`にてビルドを行うと、どちらもエラーが発生します。
|
18
|
-
これは、(webpack自体かreact-scriptsかはわかりませんが)バンドル時にコードが変換されるためです。
|
16
|
+
これは、 ~~(webpack自体かreact-scriptsかはわかりませんが)~~ バンドル時にコードが変換されるためです。
|
19
17
|
```js
|
20
18
|
var u = i(5893),
|
21
19
|
r = BigInt(9007199254740991),
|
@@ -56,4 +54,37 @@
|
|
56
54
|
// 省略
|
57
55
|
```
|
58
56
|
この違いによってreactのdevサーバではエラーが出ず、nextでは出る事になっています。
|
59
|
-
どちらにせよビルドをするとエラーになりますので、べき乗演算子は使用せず、独自の関数を実装することをおすすめします。
|
57
|
+
~~どちらにせよビルドをするとエラーになりますので、べき乗演算子は使用せず、独自の関数を実装することをおすすめします。~~
|
58
|
+
|
59
|
+
## 追記
|
60
|
+
変換はbabelによって行われています。べき乗演算子`**`はes2016で実装されたので(普通に使うブラウザではもう大丈夫ですが)古いブラウザサポートのためにbabelは昔の記法にトランスパイルします。これは正しい仕様です。
|
61
|
+
es2016以上のブラウザに対応させるには`babel.config.js`や`.babelrc`などで`@babel/preset-env/targets`を指定する必要があります。
|
62
|
+
```babel.config.js
|
63
|
+
module.exports = {
|
64
|
+
presets: [
|
65
|
+
[
|
66
|
+
"next/babel",
|
67
|
+
{
|
68
|
+
"preset-env": {
|
69
|
+
targets: {
|
70
|
+
chrome: 52,
|
71
|
+
edge: 14,
|
72
|
+
firefox: 52,
|
73
|
+
},
|
74
|
+
},
|
75
|
+
},
|
76
|
+
],
|
77
|
+
],
|
78
|
+
};
|
79
|
+
```
|
80
|
+
https://caniuse.com/?search=**
|
81
|
+
|
82
|
+
正確なサポートを指定しないのであれば、last 1 versionでも良いと思います。
|
83
|
+
```
|
84
|
+
targets:[
|
85
|
+
"last 1 chrome version",
|
86
|
+
"last 1 firefox version",
|
87
|
+
"last 1 safari version",
|
88
|
+
],
|
89
|
+
```
|
90
|
+
|