鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

SharePoint Frameworkで開発したパッケージをes6対応する方法

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

 

以上、参考になれば幸いです。