Webpackを捨てて、scss / sasstranspile用のbabel-pluginを作成した方法

バックグラウンド

ある土曜日の夜、私は座って、webpackを使用してUIキットを作成する方法を探していました。私はstyleguidstをUIキットのデモとして使用しています。もちろん、webpackはスマートで、作業ディレクトリにあるすべてのファイルを1つのバンドルに詰め込み、そこからすべてが順番に変わります。



entry.jsファイルを作成し、そこにすべてのコンポーネントをインポートして、そこからエクスポートしました。すべてが大丈夫のようです。

import Button from 'components/Button'
import Dropdown from 'components/Dropdown '

export {
  Button,
  Dropdown 
}

そして、これらすべてを構築した後、私はoutput.jsを取得しました。予想どおり、すべてが1つのファイル内のヒープ内のすべてのコンポーネントでした。ここで質問が生じました：

すべてのボタンやドロップダウンなどを個別に収集して、他のプロジェクトにインポートするにはどうすればよいですか？

しかし、私はそれをパッケージとしてnpmにアップロードしたいと思います。



うーん...順番に行きましょう。

複数のエントリ

もちろん、頭に浮かぶ最初のアイデアは、作業ディレクトリ内のすべてのコンポーネントを解析することです。NodeJSを使用することはめったにないため、ファイルの解析について少しググる必要がありました。globのようなものを見つけました。



私たちは複数のエントリを書くために運転しました。

const { basename, join, resolve } = require("path");
const glob = require("glob");

const componentFileRegEx = /\.(j|t)s(x)?$/;
const sassFileRegEx = /\s[ac]ss$/;

const getComponentsEntries = (pattern) => {
  const entries = {};
  glob.sync(pattern).forEach(file => {
    const outFile = basename (file);
    const entryName = outFile.replace(componentFileRegEx, "");
    entries[entryName] = join(__dirname, file);
  })
  return entries;
}

module.exports = {
  entry: getComponentsEntries("./components/**/*.tsx"),
  output: {
    filename: "[name].js",
    path: resolve(__dirname, "build")
  },
  module: {
    rules: [
      {
        test: componentFileRegEx,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: sassFileRegEx,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
  resolve: {
    extensions: [".js", ".ts", ".tsx", ".jsx"],
    alias: {
      components: resolve(__dirname, "components")
    }
  }
}

完了。集めます。



ビルド後、2つのButton.jsファイル、Dropdown.jsがビルドディレクトリに分類されました。内部を見てみましょう。ライセンスの中には、react.production.min.js、読みにくいミニファイドコード、そしてたくさんのでたらめがあります。さて、ボタンを使ってみましょう。



ボタンのデモファイルで、インポートをビルドディレクトリからインポートするように変更します。



これは、styleguidistのボタンの簡単なデモがどのように見えるかです-Button.md

```javascript
import Button from '../../build/Button'
<Button></Button>
```

IRボタンを見に行きます... この段階で、webpackを介して収集するという考えと欲求はすでに消えています。



Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.



webpackなしで別のビルドパスを探しています

私たちはウェブパックなしでバベルに助けを求めます。package.jsonにスクリプトを記述し、構成ファイル、拡張子、コンポーネントが配置されているディレクトリ、ビルドするディレクトリを指定します。

{
  //...package.json  -     
  scripts: {
    "build": "babel --config-file ./.babelrc --extensions '.jsx, .tsx' ./components --out-dir ./build"
  }
}

実行：

npm run build

出来上がり、ビルドディレクトリにButton.js、Dropdown.jsの2つのファイルがあり、ファイル内には美しくデザインされたバニラjs +いくつかのポリフィルと孤独な要求（ "styles.scss"）があります。明らかに、これはデモでは機能せず、スタイルのインポートを削除し（その時点で、scssトランスパイルのプラグインが見つかることを期待してかじっていました）、再度収集します。



組み立て後も、素敵なJSがいくつかあります。アセンブルされたコンポーネントをstyleguidistに統合してみましょう。

```javascript
import Button from '../../build/Button'
<Button></Button>
```

コンパイル済み-動作します。スタイルのないボタンのみ。

トランスパイルscss / sassのプラグインを探しています

はい、コンポーネントのアセンブリは機能し、コンポーネントは機能しています。npmまたは独自のネクサスでビルド、公開できます。それでも、スタイルを保存するだけです... OK、Googleが再びサポートします（いいえ）。



プラグインをグーグルで検索しても結果は得られません。 1つのプラグインはスタイルから文字列を生成し、もう1つはまったく機能せず、ビューをインポートする必要があります。「styles.scss」からスタイルをインポートする



唯一の希望はこのプラグインでした：babel-plugin-transform-scss-import-to-string、しかしそれはスタイルから文字列を生成するだけです（ああ...私は上で言いました。くそー...）。その後、すべてがさらに悪化し、Googleの6ページに到達しました（そして、時計はすでに午前3時です）。そして、何かを見つけるための特別なオプションはありません。はい、そして考えることは何もありません-私の場合ではなく、それをひどくするwebpack + sass-loader、または他の何か。神経...私は休憩を取り、お茶を飲むことにしました、私はまだ眠りたくありません。私がお茶を作っている間、scss / sasstranspileのプラグインを書くというアイデアがますます頭に浮かびました。砂糖がかき混ぜられている間、私の頭の中で時々スプーンが鳴り響きました：「plaaginを書いてください」。了解しました。プラグインを作成します。

プラグインが見つかりません。私たちは自分自身を書きます

プラグインの 基礎として、上記のbabel-plugin-transform-scss-import-to-stringを使用しました。ASTツリーを使った痔核やその他のトリックがあることを完全に理解しました。では行きましょう。



事前準備を行います。node-sassとpath、およびファイルと拡張子の通常の行が必要です。アイデアはこれです：

• インポート行からスタイルを含むファイルへのパスを取得します
• node-sassを介してスタイルを文字列に解析します（babel-plugin-transform-scss-import-to-stringに感謝します）
• インポートごとにスタイルタグを作成します（babelプラグインはインポートごとに起動されます）
• すべてのホットリロードスニーズで同じものをスローしないように、作成されたスタイルを何らかの方法で識別する必要があります。現在のファイルの値とスタイルシートの名前を使用して、属性（data-sass-component）をプッシュしてみましょう。このようなものがあります：
  
  
  
  

        <style data-sass-component="Button_style">
           .button {
              display: flex;
           }
        </style>
  

プラグインを開発してプロジェクトでテストするために、componentsディレクトリと同じレベルで、babel-plugin-transform-scssディレクトリを作成し、そこにpackage.jsonを詰め込み、そこにlibディレクトリを詰め込みました。そして、すでにindex.jsをそこに投入しました。

あなたはvkurseになります-Babelconfigは、package.jsonのmainディレクティブで指定されているプラ​​グインの後ろに登ります。このため、私はそれを詰め込まなければなりませんでした。

私たちは示します：

{
  //...package.json   -     ,    main  
  main: "lib/index.js"
}

次に、プラグインへのパスをbabel config（.babelrc）にプッシュします。

{
  //  
  plugins: [
    "./babel-plugin-transform-scss"
    //    
  ]
}

それでは、index.jsに魔法を詰め込みましょう。



最初の段階は、scssまたはsassファイルのインポートを確認し、インポートされたファイルの名前を取得し、jsファイル（コンポーネント）自体の名前を取得し、scssまたはsass文字列をcssに転送することです。WebStormからnpmまで、デバッガーを介してビルドを実行し、ブレークポイントを設定し、パスと状態の引数を調べてファイル名をフェッチし、cursesで処理します。

const { resolve, dirname, join } = require("path");
const { renderSync } = require("node-sass");

const regexps = {
  sassFile: /([A-Za-z0-9]+).s[ac]ss/g,
  sassExt: /\.s[ac]ss$/,
  currentFile: /([A-Za-z0-9]+).(t|j)s(x)/g,
  currentFileExt: /.(t|j)s(x)/g
};

function transformScss(babel) {
  const { types: t } = babel;
  return {
    name: "babel-plugin-transform-scss",
    visitor: {
      ImportDeclaration(path, state) {
        /**
         * ,     scss/sass   
         */
        if (!regexps.sassExt.test(path.node.source.value)) return;
        const sassFileNameMatch = path.node.source.value.match(
          regexps.sassFile
        );

        /**
         *    scss/sass    js 
         */
        const sassFileName = sassFileNameMatch[0].replace(regexps.sassExt, "");
        const file = this.filename.match(regexps.currentFile);
        const filename = `${file[0].replace(
          regexps.currentFileExt,
          ""
        )}_${sassFileName}`;

        /**
         *
         *     scss/sass ,    css
         */
        const scssFileDirectory = resolve(dirname(state.file.opts.filename));
        const fullScssFilePath = join(
          scssFileDirectory,
          path.node.source.value
        );
        const projectRoot = process.cwd();
        const nodeModulesPath = join(projectRoot, "node_modules");
        const sassDefaults = {
          file: fullScssFilePath,
          sourceMap: false,
          includePaths: [nodeModulesPath, scssFileDirectory, projectRoot]
        };
        const sassResult = renderSync({ ...sassDefaults, ...state.opts });
        const transpiledContent = sassResult.css.toString() || "";
        }
    }
}

火。最初の成功は、transpiledContentでcss行を取得しました。次に、最悪の事態です。ASTツリーのAPIについて、babeljs.io / docs / en / babel - types＃apiにアクセスします。astexplorer.netにアクセスして、スタイルシートを頭に押し込むためのコードを記述します。



でastexplorer.net、スタイルのインポートの代わりに呼び出される自己呼び出す関数を書きます：

(function(){
  const styles = "generated transpiledContent" // ".button {/n display: flex; /n}/n" 
  const fileName = "generated_attributeValue" //Button_style
  const element = document.querySelector("style[data-sass-component='fileName']")
  if(!element){
    const styleBlock = document.createElement("style")
    styleBlock.innerHTML = styles
    styleBlock.setAttribute("data-sass-component", fileName)
    document.head.appendChild(styleBlock)
  }
})()

ASTエクスプローラーで、左側の行、宣言、リテラルを突く-ツリーの右側で宣言の構造を確認し、この構造を使用してbabeljs.io/docs/en/babel-types#apiにアクセスし、これをすべてスモークして、置換を記述します。



数分後...



1〜1.5時間後、astからbabel-types apiまでタブを実行し、次にコードに、scss / sassimportの代わりを作成しました。astツリーとbabel-typesapiを別々に解析することはしません。さらに多くの文字があります。結果をすぐに表示します。

const { resolve, dirname, join } = require("path");
const { renderSync } = require("node-sass");

const regexps = {
  sassFile: /([A-Za-z0-9]+).s[ac]ss/g,
  sassExt: /\.s[ac]ss$/,
  currentFile: /([A-Za-z0-9]+).(t|j)s(x)/g,
  currentFileExt: /.(t|j)s(x)/g
};

function transformScss(babel) {
  const { types: t } = babel;
  return {
    name: "babel-plugin-transform-scss",
    visitor: {
      ImportDeclaration(path, state) {
        /**
         * ,     scss/sass   
         */
        if (!regexps.sassExt.test(path.node.source.value)) return;
        const sassFileNameMatch = path.node.source.value.match(
          regexps.sassFile
        );

        /**
         *    scss/sass    js 
         */
        const sassFileName = sassFileNameMatch[0].replace(regexps.sassExt, "");
        const file = this.filename.match(regexps.currentFile);
        const filename = `${file[0].replace(
          regexps.currentFileExt,
          ""
        )}_${sassFileName}`;

        /**
         *
         *     scss/sass ,    css
         */
        const scssFileDirectory = resolve(dirname(state.file.opts.filename));
        const fullScssFilePath = join(
          scssFileDirectory,
          path.node.source.value
        );
        const projectRoot = process.cwd();
        const nodeModulesPath = join(projectRoot, "node_modules");
        const sassDefaults = {
          file: fullScssFilePath,
          sourceMap: false,
          includePaths: [nodeModulesPath, scssFileDirectory, projectRoot]
        };
        const sassResult = renderSync({ ...sassDefaults, ...state.opts });
        const transpiledContent = sassResult.css.toString() || "";
        /**
         *  ,   AST Explorer     
         * replaceWith  path.
         */
        path.replaceWith(
          t.callExpression(
            t.functionExpression(
              t.identifier(""),
              [],
              t.blockStatement(
                [
                  t.variableDeclaration("const", [
                    t.variableDeclarator(
                      t.identifier("styles"),
                      t.stringLiteral(transpiledContent)
                    )
                  ]),
                  t.variableDeclaration("const", [
                    t.variableDeclarator(
                      t.identifier("fileName"),
                      t.stringLiteral(filename)
                    )
                  ]),
                  t.variableDeclaration("const", [
                    t.variableDeclarator(
                      t.identifier("element"),
                      t.callExpression(
                        t.memberExpression(
                          t.identifier("document"),
                          t.identifier("querySelector")
                        ),
                        [
                          t.stringLiteral(
                            `style[data-sass-component='${filename}']`
                          )
                        ]
                      )
                    )
                  ]),
                  t.ifStatement(
                    t.unaryExpression("!", t.identifier("element"), true),
                    t.blockStatement(
                      [
                        t.variableDeclaration("const", [
                          t.variableDeclarator(
                            t.identifier("styleBlock"),
                            t.callExpression(
                              t.memberExpression(
                                t.identifier("document"),
                                t.identifier("createElement")
                              ),
                              [t.stringLiteral("style")]
                            )
                          )
                        ]),
                        t.expressionStatement(
                          t.assignmentExpression(
                            "=",
                            t.memberExpression(
                              t.identifier("styleBlock"),
                              t.identifier("innerHTML")
                            ),
                            t.identifier("styles")
                          )
                        ),
                        t.expressionStatement(
                          t.callExpression(
                            t.memberExpression(
                              t.identifier("styleBlock"),
                              t.identifier("setAttribute")
                            ),
                            [
                              t.stringLiteral("data-sass-component"),
                              t.identifier("fileName")
                            ]
                          )
                        ),
                        t.expressionStatement(
                          t.callExpression(
                            t.memberExpression(
                              t.memberExpression(
                                t.identifier("document"),
                                t.identifier("head"),
                                false
                              ),
                              t.identifier("appendChild"),
                              false
                            ),
                            [t.identifier("styleBlock")]
                          )
                        )
                      ],
                      []
                    ),
                    null
                  )
                ],
                []
              ),
              false,
              false
            ),
            []
          )
        );
        }
    }
}

最後の喜び

やったー!!! インポートは、このボタンを使用してスタイルをドキュメントの先頭にプッシュする関数の呼び出しに置き換えられました。そして、私がこのカヤック全体をウェブパックから始めて、サスローダーを刈ったらどうなるだろうと思いました。それは機能しますか？さて、刈って確認します。このファイルタイプのローダーを定義する必要があるというエラーを待って、Webpackを使用してアセンブリを起動します...しかし、エラーはなく、すべてがアセンブルされます。ページを開いて見てみると、スタイルがドキュメントの先頭に貼り付いています。面白いことに、3つのスタイルのローダーも削除しました（とても幸せな笑顔）。



この記事に興味がある場合は、githubのアスタリスクでサポートしてください。



npmパッケージへのリンクもあります：www.npmjs.com/package/babel-plugin-transform-scss



注：記事の外に、タイプごとにスタイルをインポートするためのチェックを追加しました'./styles.scss'からスタイルをインポートします