Question

我正在尝试使用rapack.js和typescript创建一个单页应用程序，由webpack捆绑，但是浏览器说要求没有定义。

我经历了很多教程，我的脑袋正在游泳，但我认为这应该有效。

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {  
    target: 'web',
    mode: 'development',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
      },
      resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {

                }
            },
            { 
                test: /\.html$/,
                loader: 'ractive'
            }
        ]
    }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

的index.html

<!DOCTYPE html>  
<html>  
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>

    <body>
        <div id="app"></div>

        <script src="dist/build.js"></script>
    </body>
</html>

main.ts

import Ractive from 'ractive';

let App = new Ractive({  
  el: '#app',
  template: '<input type="text" value="{{name}}"><p>Hello {{name}}</p>',
  data: {
    name: 'World'
  }
});

export default App;

如果没有更多细节，Stackoverflow将不允许我提交此内容。我不确定我还能添加什么，我觉得发布我的配置是问题的最佳解释。

Answer 1

tsconfig中的参数不应该存在，请删除它：

"moduleResolution": "node"

还将prop模块的值更改为

"module": "commonjs"

进一步阅读：

http://www.typescriptlang.org/docs/handbook/module-resolution.html

在webpack中使用ractive.js - “require is not defined”

1 个答案: