2017-10-05 19 views
0

Aurelia Syncfusion Bridgeを使用してSyncfusionsのJsライブラリとAureliaプロジェクトを統合しようとしていますが、次のエラーが表示されます。私のベンダーパッケージにプラグインします。"Syncfusion-javascriptを解決できません" Webpack - Aurelia

ERROR in dll vendor Module not found: Error: Can't resolve 'syncfusion-javascript' in 'C:\Users\Liam\Downloads\aurelia-webpack1333503894' @ dll vendor

webpack.config.js

const path = require('path'); 
const webpack = require('webpack'); 
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin'); 
const bundleOutputDir = './wwwroot/dist'; 

module.exports = (env) => { 
    const isDevBuild = !(env && env.prod); 
    return [{ 
     stats: { modules: false }, 
     entry: { 'app': 'aurelia-bootstrapper' }, 
     resolve: { 
      extensions: ['.ts', '.js'], 
      modules: ['ClientApp', 'node_modules'], 
     }, 
     output: { 
      path: path.resolve(bundleOutputDir), 
      publicPath: 'dist/', 
      filename: '[name].js' 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' }, 
       { test: /\.html$/i, use: 'html-loader' }, 
       { test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }, 
       { test: /\.(png|jpg|jpeg|gif|cur|svg)$/, use: 'url-loader?limit=25000' }, 
       { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2' } }, 
       { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff' } }, 
       { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }, 

      ] 
     }, 
     plugins: [ 
      new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }), 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }), 
      new AureliaPlugin({ aureliaApp: 'boot' }), 

     ].concat(isDevBuild ? [ 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
      new webpack.optimize.UglifyJsPlugin() 
     ]) 
    }]; 
} 

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia- 
webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var extractCSS = new ExtractTextPlugin('vendor.css'); 

module.exports = ({ prod } = {}) => { 
const isDevBuild = !prod; 

return [{ 
    stats: { modules: false }, 
    resolve: { 
     extensions: ['.js'] 
    }, 
    module: { 
     loaders: [ 
      { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, 
      { test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) } 
     ] 
    }, 
    entry: { 
     vendor: [ 
      'aurelia-event-aggregator', 
      'aurelia-fetch-client', 
      'aurelia-framework', 
      'aurelia-history-browser', 
      'aurelia-logging-console', 
      'aurelia-pal-browser', 
      'aurelia-polyfills', 
      'aurelia-route-recognizer', 
      'aurelia-router', 
      'aurelia-templating-binding', 
      'aurelia-templating-resources', 
      'aurelia-templating-router', 
      'bootstrap', 
      'bootstrap/dist/css/bootstrap.css', 
      'jquery', 
      "aurelia-syncfusion-bridge", 
      "syncfusion-javascript"  
     ], 
    }, 
    output: { 
     path: path.join(__dirname, 'wwwroot', 'dist'), 
     publicPath: 'dist/', 
     filename: '[name].js', 
     library: '[name]_[hash]', 
    }, 
    plugins: [ 
     extractCSS, 
     new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
     new webpack.DllPlugin({ 
      path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
      name: '[name]_[hash]' 
     }), 
     new ModuleDependenciesPlugin({ 
      "aurelia-syncfusion-bridge": ["./grid/grid", "./grid/column"], 
     }), 
    ].concat(isDevBuild ? [] : [ 
     new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 
    ]) 
}] 

}。

答えて

0

Syncfusionコントロールに興味をお持ちいただきありがとうございます。

aurelia-syncfusion-bridgeリソースは、webpack.config.jsファイルで設定することをお勧めします。 aurelia-syncfusion-bridgeのリソースはaurelia-webpack-pluginによってトレースされ、app.bundleに含まれています。

と仮定します。このプラグインをwebpack.vendor.jsに追加する場合は、適切なバンドルのために追加のaurelia-syncfusion-bridgeのリソースごとに手動でバンドルする必要があります。ブリッジをwebpack.config.jsに設定することをお勧めします。これにより、自動的にブリッジソースがアプリケーションバンドルと共にバンドルされます。

以下に同じサンプルを用意しました。

Sample

あなたがこの上さらにサポートが必要な場合はお知らせください。

ありがとう、 アビナヤS

関連する問題