使用 ractive.js 和 webpack - "require is not defined"

Question

我正在尝试使用 ractive.js 和 typescript 创建一个单页应用程序，由 webpack 捆绑，但是浏览器说 require is not defined。

我学习了很多教程，但我觉得这应该行得通。

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;

如果没有更多详细信息，Whosebug 不会让我提交。我不确定我还能添加什么，我觉得发布我的配置是对这个问题的最好解释。

Answer 1

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

"moduleResolution": "node"

同时将 prop 模块的值更改为

"module": "commonjs"

进一步阅读：

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

使用 ractive.js 和 webpack - "require is not defined"

Using ractive.js with webpack - "require is not defined"

typescript

ractivejs

webpack