SPFx バージョン1.8は既定でes5でコンパイルされるよう設定されています。これはjsファイル圧縮用ライブラリのUglifyJSがes6に対応していないためと思われます。手入れをすればうまく動かせたので備忘としてまとめておきます。
tsconfig.jsonの設定
compilerOptions > target をes6に。
compilerOptions > lib にes6を追加。
{
~ 一部抜粋 ~
"compilerOptions": {
"target": "es6",
"lib": [
"es6",
"es2015",
"es5",
"dom",
"es2015.collection"
]
}
}
package.jsonの設定
terserとwebpack-mergeをdevDependenciesに追加。
追加したら npm -i を実行。
{
~ 一部抜粋 ~
"devDependencies": {
"terser-webpack-plugin-legacy": "1.2.3",
"webpack-merge": "4.2.1"
}
}
gulpfile.jsの設定
build.configureWebpack.setConfigメソッドの呼び出しを追加。
'use strict';
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin-legacy');
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid'
is not camelCase and will not be type-safe.`);
build.configureWebpack.setConfig({
additionalConfiguration: function (config) {
let newConfig = config;
config.plugins.forEach((plugin, i) => {
if (plugin.options && plugin.options.mangle) {
config.plugins.splice(i, 1);
newConfig = merge(config, {
plugins: [
new TerserPlugin()
]
});
}
});
return newConfig;
}
});
build.initialize(gulp);
パッケージ作り
いつもどおりのコマンドを実行。
gulp build --ship
gulp bundle --ship
gulp package-solution --ship
以上、参考になれば幸いです。