# Gutenberg のカスタムブロックでも、ES Modules import を使う。

- リンク: https://torounit.com/blog/gutenberg-%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%a7%e3%82%82%e3%80%81es-modules-import-%e3%82%92%e4%bd%bf%e3%81%86%e3%80%82/
- 公開日: 2018-10-24T13:44:31+09:00
- 作成者: Toro\_Unit

要は、どうしたいかというと、

    ```wp-block-code
    const { registerBlockType } = wp.blocks;
    ```

これを、Gutenberg のコアのソースコードのように、

    ```wp-block-code
    import { registerBlockType } form '@wordpress/blocks'
    ```

としたいと言うことです。

## やりかた

webpack.config.js を の externals を良い感じに設定すればできます。Gunteberg 本体
も似たようなコトをやっています。

    ```wp-block-code
    const entryPointNames = [
    	'blocks',
    	'components',
    	'editor',
    	'utils',
    	'viewport',
    	'edit-post',
    	'core-blocks',
    	'nux',
    ];

    const gutenbergPackages = [
    	'api-request',
    	'blob',
    	'core-data',
    	'data',
    	'date',
    	'deprecated',
    	'dom',
    	'element',
    	'keycodes',
    	'plugins',
    	'shortcode',
    ];

    const wordPressPackages = [
    	'a11y',
    	'dom-ready',
    	'hooks',
    	'i18n',
    	'is-shallow-equal',
    ];

    const externals = {
    	react: 'React',
    	'react-dom': 'ReactDOM',
    	tinymce: 'tinymce',
    	moment: 'moment',
    	jquery: 'jQuery',
    	lodash: 'lodash',
    	'lodash-es': 'lodash'
    };

    [
    	...entryPointNames,
    	...gutenbergPackages,
    	...wordPressPackages,
    ].forEach( ( name ) => {
    	externals[`@wordpress/${ name }`] = {
    		window: ['wp', name],
    	};
    } );

    module.exports = {
    	output: {
    		library: ['wp', '[name]'],
    		libraryTarget: 'window',
    	},
    	mode: 'production',
    	module: {
    		rules: [
    			{
    				test: /\.js$/,
    				exclude: /node_modules/,
    				use: {
    					loader: 'babel-loader',
    					options: {
    						presets: ['@babel/preset-env']
    					}
    				}
    			}
    		]
    	},
    	devtool: 'source-map',
    	externals,
    	resolve: {
    		extensions: ['.js', '.jsx']
    	}
    };
    ```

こんな感じの config を書いてます。externals の 設定を行えば、@wordpress/{packageName}
みたいなので、import の解決が出来ます。output の設定も書かないとうまいこと動きま
せん。ここでちょっとつまづきました。

## メリット

 * コアのソースをコピペするときに、import とかを書き換えなくて済む。
 * npm で、@wordpress/editor 等を devDependencies で入れておけば、PHPStorm 等でコード
   ジャンプが容易に出来る。
 * ちょっとカッコいい。

addFilter 等もあるため、コアのソースを読みたいという瞬間はかなり多いです。ですので、
コードジャンプが行えるのは大きな利点なのかなとおもいます。