web-dev-qa-db-fra.com

Comment spécifier l'option cacheDirectory lors de l'utilisation de babel-loader avec webpack?

Il y a une option cacheDirectory dans babel-loader. Je ne peux pas comprendre comment l'utiliser avec la configuration Webpack suivante:

var compiler = webpack( {
    context: path.resolve( __dirname + "/../../" + rootModuleDir + "/" + modules[ module ] ),
    entry: "./index.jsx",
    resolve: {
        root: path.resolve( __dirname + "/../../assets/js/lib/react" ),
        extensions: [ "", ".js", ".jsx" ]
    },
    output: {
        path: targetDir,
        filename: modules[ module ] + ".js"
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?optional=runtime" }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin(),
        new webpack.SourceMapDevToolPlugin( {
            filename: "[file].map"
        } )
    ]
} );

Où cela devrait-il aller?

webpackbabeljs
23
Vladislav Rastrusny

Vous pouvez l'ajouter à la configuration de babel-loader comme ceci:

loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader?optional=runtime&cacheDirectory"
    }
]

Remarque, vous ne devez pas ajouter =true, ce n'est pas nécessaire et définira le cacheDirectory pour utiliser un répertoire nommé true. Référence: l'utilisation de cacheDirectory échoue avec une erreur

Vous pouvez également utiliser la propriété query:

rules: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
            optional: "runtime",
            cacheDirectory: true
        }
    }
]

Lorsque vous utilisez la propriété query, la spécification de true activera l'option et la spécification d'une valeur de chaîne activera l'option et la configurera pour utiliser ce nom de répertoire. Référence: paramètres de requête

18
Will Klein

Ajoutez-le à la chaîne de chargement comme ceci:

module: {
    loaders: [
        { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?optional=runtime&cacheDirectory=true" }
    ]
},
2
twobit

Vous pouvez le faire comme ça -

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?+cacheDirectory'
      }
    ]
  } 
};

Il sera mis en cache dans node_modules/.cache/babel-loader dossier.

Les fichiers seraient stockés quelque chose comme ça -

0065e42bfc1ab4c292dfa71c6a0e924b59ed6a37.json.gz538205e2b3bffa535d934c3d8f2feee4566bfc00.json.gzb17d9d4b73726f4ba7c5797a9959546fb3d72d69.json.gz

Fichier de cache différent pour chaque fichier JS.

Consultez la documentation ici - https://webpack.js.org/loaders/babel-loader/#options

0
Vivek Kumar