質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1594閲覧

webpackでライブラリをまとめたjsファイルのconstをvarにする方法

退会済みユーザー

退会済みユーザー

総合スコア0

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/04/01 07:39

編集2020/04/07 09:39

typescriptで書いたコードをwebpackでjsファイルとして出力させています。
app.js→アプリ独自のjs
vendor.js→importで読み込んだライブラリをまとめたjs

jsを出力した後でios8のsafariで確認すると、次のようなメッセージが表示されていました。

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

vendor.jsでconstが出力されていたのが原因のようです。
app.jsではエラーは発生していませんでした。
constをvarとして出力させるにはどうしたらよいのでしょうか。

js

1■webpack.config.js 2const path = require("path"); 3const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 5module.exports = { 6 mode: "development", 7 8 entry: { 9 app: './src/ts/index.ts', 10 }, 11 output: { 12 filename: '[name].js', 13 chunkFilename: 'vendor.js', 14 path: path.join(__dirname, '/dist/js'), 15 }, 16 module: { 17 rules: [{ 18 test: /.ts$/, 19 use: "ts-loader" 20 }] 21 }, 22 optimization: { 23 splitChunks: { 24 cacheGroups: { 25 vendor: { 26 test: /node_modules/, 27 name: 'vendor', 28 chunks: 'initial', 29 enforce: true 30 } 31 }, 32 33 } 34 }, 35 resolve: { 36 extensions: [".ts", ".js"] 37 }, 38 devServer: { 39 disableHostCheck: true, 40 contentBase: path.join(__dirname, "dist/"), 41 compress: true, 42 port: 8080, 43 open: true 44 }, 45 devtool: "source-map", 46 plugins: [ 47 new HtmlWebpackPlugin({ 48 template: "src/index.html" 49 }) 50 ] 51};

json

1■tsconfig.json 2{ 3 "compilerOptions": { 4 "target": "es5", 5 "module": "CommonJS", 6 "lib": ["dom", "es5"], 7 "baseUrl": "./src/ts", 8 "outDir": "./dist/js", 9 "allowJs": true, 10 "alwaysStrict": true, 11 "esModuleInterop": true, 12 "forceConsistentCasingInFileNames": true, 13 "isolatedModules": true, 14 "moduleResolution": "node", 15 "noEmit": false, 16 "noFallthroughCasesInSwitch": true, 17 "noUnusedLocals": false, 18 "noUnusedParameters": false, 19 "removeComments": true, 20 "skipLibCheck": true, 21 "strict": true, 22 "noImplicitAny": false, 23 "strictNullChecks": false 24 }, 25 "compileOnSave": true, 26 "include": [ 27 "src/ts/**/*.ts" 28 ], 29 "exclude": [ 30 "node_modules", 31 ], 32}

json

1■package.json 2{ 3 "name": "sample", 4 "version": "1.0.0", 5 "description": "", 6 "main": "index.js", 7 "scripts": { 8 "test": "echo \"Error: no test specified\" && exit 1", 9 "build": "webpack", 10 "start": "webpack-dev-server" 11 }, 12 "author": "", 13 "license": "ISC", 14 "dependencies": { 15 "pixi.js": "^5.2.1" 16 }, 17 "devDependencies": { 18 "html-loader": "^1.1.0", 19 "html-webpack-plugin": "^4.0.4", 20 "ts-loader": "^6.2.2", 21 "typescript": "^3.8.3", 22 "webpack": "^4.42.1", 23 "webpack-cli": "^3.3.11", 24 "webpack-dev-server": "^3.10.3" 25 } 26}

typescript

1■index.ts 2import * as PIXI from "pixi.js"; 3const loader: PIXI.Loader = PIXI.Loader.shared; 4alert("load!");

Windowsで実施
Node.jsのバージョン:
v.10.10.0
npmのバージョン:
6.4.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/04/01 11:38

その設定で試してみましたが、const は出力されないですね。typescript のコードと、それをどうやってビルドしたのか教えてください。
退会済みユーザー

退会済みユーザー

2020/04/02 03:04

gulpを経由してWebpackを起動しています。 vendor.js内で./node_modules/ismobilejs/esm/isMobile.jsというモジュールが読み込まれて、その中でconstが定義されたままで出力されているようです。
hoshi-takanori

2020/04/02 03:59

なるほど…。自分は webpack-cli を入れてそれ経由でした。gulp は知らないのでごめんなさい。
退会済みユーザー

退会済みユーザー

2020/04/02 04:10

webpack-cliであれば、index.tsの内容であっても、vendor.jsにconstは出力されないといった認識でよいでしょうか。
hoshi-takanori

2020/04/02 04:16

もちろん設定次第ですが、質問文の webpack.config.js では const は出力されませんでした。 「gulpを経由してWebpackを起動」ということは webpack の出力をさらに gulp が処理してるんですかね。gulp もちゃんと設定すれば大丈夫でしょうけど…。
退会済みユーザー

退会済みユーザー

2020/04/03 06:38

gulpをやめてwebpackのみの処理に変更し、npm run startを実行したのですが、まだconstが出力されてしまいます。 vendor.jsの41345行目付近です。
guest

回答1

0

ベストアンサー

結局pixi.jsのバージョンを下げることで対応することにしました。

投稿2020/05/01 01:48

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問