Summernoteをビルドする

ビルドする

• 以下の手順でビルドする。

wget https://github.com/summernote/summernote-webpack-example/archive/refs/heads/master.zip
unzip master.zip
mv summernote-webpack-example-master/ summernote/
cd summernote
yarn install
npx webpack --config webpack.config.dev.js --mode development

• もし、このようなエラーが出力される場合は、

$ npx webpack --config webpack.config.dev.js --mode development
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Hash: 15a2ca3a09a3d20aa4d8
Version: webpack 4.46.0
Time: 6482ms
Built at: 2023/03/05 12:44:50
                Asset       Size  Chunks             Chunk Names
              app.css    228 KiB     app  [emitted]  app
               app.js   1.28 MiB     app  [emitted]  app
  font/summernote.eot   13.7 KiB          [emitted]  
  font/summernote.ttf   13.6 KiB          [emitted]  
 font/summernote.woff   8.18 KiB          [emitted]  
font/summernote.woff2   6.79 KiB          [emitted]  
           index.html  335 bytes          [emitted]  
Entrypoint app = app.css app.js
[./src/index.js] 547 bytes {app} [built]
    + 14 hidden modules

ERROR in ./node_modules/summernote/dist/summernote-bs4.js
Module not found: Error: Can't resolve 'jQuery' in '/home/kanno/work/summernote/node_modules/summernote/dist'
 @ ./node_modules/summernote/dist/summernote-bs4.js 15:27-44
 @ ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 285 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--6-3!node_modules/bootstrap/dist/css/bootstrap.min.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--6-3!node_modules/codemirror/lib/codemirror.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--6-3!node_modules/codemirror/theme/monokai.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/dist/cjs.js??ref--6-3!node_modules/summernote/dist/summernote-bs4.css:
    Entrypoint mini-css-extract-plugin = *
       7 modules
$ 

../summernote/node_modules/summernote/dist/summernote-bs4.js を修正する。

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("jQuery"));
+		module.exports = factory(require("jquery"));
	else if(typeof define === 'function' && define.amd)

日本語化する

• ./summernote/src/index.js を修正する。

  import $ from 'jquery';
  import 'popper.js';
  import 'bootstrap';
  import 'bootstrap/dist/css/bootstrap.min.css';
  
  import CodeMirror from 'codemirror/lib/codemirror';
  import 'codemirror/lib/codemirror.css';
  import 'codemirror/mode/xml/xml';
  import 'codemirror/theme/monokai.css'
  
  import 'summernote/dist/summernote-bs4';
  import 'summernote/dist/summernote-bs4.css';
  
+ import 'summernote/src/lang/summernote-ja-JP.js';
  
  $(".summernote").summernote({
      height: 150,   //set editable area's height
+     lang: "ja-JP",
      codemirror: { // codemirror options
        CodeMirrorConstructor: CodeMirror,
        theme: 'monokai'
      }
  });