如何一起设置Webpack,Angular 2.0和Django?

时间:2016-07-28 15:20:33

标签: node.js django angular typescript webpack

我目前正在尝试设置一个webpack,angular 2.0和django堆栈并尝试将所有部分组合在一起有点令人困惑。

我正在使用NPM来处理库。

当我尝试使用django编译用于加载的打字稿时出现以下错误:

An error occurred in the upload. Please try again later.

这是我的tsconfig.json文件

                         Asset      Size   Chunks             Chunk Names
  main-71f084fe9f6c4015034a.ts   5.09 MB  0, 1, 2  [emitted]  main
   app-71f084fe9f6c4015034a.ts  23 bytes     1, 2  [emitted]  app
vendor-71f084fe9f6c4015034a.ts    3.6 kB     2, 1  [emitted]  vendor
    + 329 hidden modules

ERROR in /home/bischoff_s/Code/optim/typings/globals/webpack-env/index.d.ts
(176,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'NodeRequire', but here has type 'RequireFunction'.

ERROR in /home/bischoff_s/Code/optim/typings/globals/webpack-env/index.d.ts
(225,13): error TS2403: Subsequent variable declarations must have the same type.  Variable 'module' must be of type 'NodeModule', but here has type 'Module'

我的typings.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "suppressImplicitAnyIndexErrors": true
    }
}

我的webpack.common.js

{
    "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160602141332",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160621231320"
    }
}

最后是webpack.dev.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        'vendor': './assets/js/vendor.ts',
        'app': './assets/js/index.ts'
    },
    entry: './assets/js/index.ts',
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor']
        })
    ]
};

1 个答案:

答案 0 :(得分:0)

从不同的webpack-env和节点输入不同是一个问题。这是参考答案的链接。

TypeScript error on compilation with webpack