使用Webpack导入JavaScript文件

Question

我已经成功安装并运行了Webpack，现在我想将我的代码拆分成不同的文件。

假设我有一个独立的文件包含以下代码：

handlebarHelpers.js

handlebars.registerHelper('timeFilter', function(context, block) {
  var f = block.hash.format || "MMM DD, YYYY HH:mm"; //default format
  return moment.unix(context).format(f);
});

然后我想通过webpack将这个文件包含到我的主要app.js文件中：

webpack.conf.js

const webpack = require('webpack');

module.exports = {
  entry: {
    app: [
      'handlebars',
      'handlebarHelpers.js'
      './js/app.js'
    ],
  },
  output: {
    filename: 'www/theme/js/app.dev.js'
  },
  node: {
    fs: 'empty'
  }
};

这段代码可以正常工作，但我该如何在我的app.js文件中执行它呢？我找到了很多关于webpack的教程，但没有一篇像这样基础的。

我尝试过：

**app.js**

import handlebars from 'handlebars';
import './handlebarHelpers';

// yadaya create handlebars
$( document ).ready(function() {
    console.log( "ready!" );
});

以下方法无效：

引用错误：handlebars未定义

但是，当将handlebars助手代码放在app.js中时，它可以正常工作。

如何解决？

- KSPR

---

你尝试过这个吗？import handlebars from './handlebars'; 其中 "./" 是指向你的 handlebar 模块的路径。 - Christophe

什么？没有导入handlebars吗？Handlebars帮助程序文件没有被导入。为什么Javascript没有像PHP或其他地球上的语言那样拥有include函数呢？ - KSPR

Answer 1

在你的webpack配置中，你引用了不同目录下的handlesbarsHelpers和app.js。但在你的app.js示例中，你引用了handlesbarsHelpers，好像它与app.js在同一个目录下。

尝试将它们移动到同一个目录下。此外，如果app.js导入了你需要的所有内容，那么在入口点中只需要引用app.js即可： webpack.config.js

entry: {
  app: './js/app.js'
},

app.js

import handlebars from 'handlebars';
import './handlebarHelpers';  // make sure this is in same dir as app.js

// yadaya create handlebars
$( document ).ready(function() {
    console.log( "ready!" );
});

- olore

Answer 2

如果您使用dividab/tsconfig-paths-webpack-plugin，它的默认extension不包括.js。您需要像这样做一些事情：

resolve: {
  plugins: [new TsconfigPathsPlugin({
    extensions: ['.ts', '.tsx', '.js'],
  })],
  extensions: ['.ts', '.tsx', '.js'],
},

- Kindred