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

Question

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として出力させるにはどうしたらよいのでしょうか。

■webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",

  entry: {
    app: './src/ts/index.ts',
  },
  output: {
    filename: '[name].js',
    chunkFilename: 'vendor.js',
    path: path.join(__dirname, '/dist/js'),
  },
  module: {
    rules: [{
      test: /.ts$/,
      use: "ts-loader"
    }]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'initial',
          enforce: true
        }
      },

    }
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  devServer: {
    disableHostCheck: true,
    contentBase: path.join(__dirname, "dist/"),
    compress: true,
    port: 8080,
    open: true
  },
  devtool: "source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    })
  ]
};

■tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "CommonJS",
    "lib": ["dom", "es5"],
    "baseUrl": "./src/ts",
    "outDir": "./dist/js",
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noEmit": false,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "removeComments": true,
    "skipLibCheck": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": false
  },
  "compileOnSave": true,
  "include": [
    "src/ts/**/*.ts"
  ],
  "exclude": [
    "node_modules",
  ],
}

■package.json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "pixi.js": "^5.2.1"
  },
  "devDependencies": {
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.0.4",
    "ts-loader": "^6.2.2",
    "typescript": "^3.8.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

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

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

Comments

[hoshi-takanori]

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

[退会済みユーザー]

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

[hoshi-takanori]

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

[退会済みユーザー]

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

[hoshi-takanori]

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

[退会済みユーザー]

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

Answer 1

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