从 Phoenix 1.4 中的 priv/static/js 文件夹导入节点模块答案

【问题标题】：Import node modules from priv/static/js folder in Phoenix 1.4从 Phoenix 1.4 中的 priv/static/js 文件夹导入节点模块
【发布时间】：2019-07-18 02:48:45
【问题描述】：

我在 assets/ 文件夹中安装了带有 npm install 的 vuejs，并在 priv/static/js/list_show.js 中创建了一个 list_show.js 文件。当我在 list_show.js 中执行 import Vue from "vue" 时，它不起作用，我在控制台中收到此消息：“Uncaught SyntaxError: Unexpected identifier”。

如何在我的 static/js/ 文件夹中导入模块？（我默认使用的是 Phoenix 1.4 和 Webpack）

【问题讨论】：

这里回答：stackoverflow.com/a/43265955/1173020 不是 Vue 的问题，不过加个 Vue 应该问题不大。
抱歉，我不知道如何在您的答案中添加 vueJS。另外，我不认为总是为我正在安装的每个节点模块调用“webpack.ProvidePlugin”是不切实际的。
你是在使用 babel 和 webpack，还是如何转译 es6 语法？
我用的是Phoenix 1.4的基本配置。含义 webpack

标签： javascript webpack elixir phoenix-framework node-modules

【解决方案1】：

您不应在/priv/static/js 目录中创建.js 文件。而是使用/assets 目录。

Phoenix 1.4 使用 Webpack 将位于 /assets 中的 js 文件捆绑到单个 app.js 文件中，该文件将被放入 /priv/static/js 中。作为应用程序的入口点，您可以使用/assets/js/app.js，其中以下行加载 Vue：

import Vue from 'vue';

new Vue({
  // ...
});

（你也可以把这段代码放在一个单独的.js文件中，只要你在app.js中导入）

但是，如果您需要针对不同路由的静态 js 文件，此解决方案将无济于事。您可能希望始终呈现 priv/static/js/app.js，但特定文件仅在特定布局上。在priv/static/js 中实现多个输出文件可以通过稍微修改webpack.config.js 并添加更多入口点来完成：

entry: {
  app: ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
  special: ['./js/special.js']
},
output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../priv/static/js')},
}

使用此配置，将创建两个文件：

priv/static/js/app.js - 包含所有供应商文件和app.js
priv/static/js/special.js - 仅包含 special.js

special.js 文件可以包含在 Phoenix 中：

 <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/special.js") %>"></script>

【讨论】：

谢谢！这正是我需要做的！ :D