Tag: webpack

无法在我的Rails5应用程序中使用vue组件

我是vue.js和webpack配置的新手。 我可以在app/javascript/packs/somecode.js使用Vue实例。 但我无法渲染*.vue文件。 如果我将任何*.vue文件添加到app/javascript/packs/components/目录， 它说 “模块构建失败：ReferenceError：[BABEL]此错误的常见原因是存在没有相应预设名称的配置选项对象。” 但我没有创建任何新选项。 环境 ruby ruby 2.4.3p205 (2017-12-14 revision 61247) [x86_64-darwin16] 轨道 5.1.0 app.vue export default { data: function () { return { message: “Hello Vue!” } } } 我的chrome浏览器中的console.log ERROR in ./node_modules/babel-loader/lib??ref–1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/packs/app.vue?vue&type=script&lang=js Module build failed: ReferenceError: [BABEL] /Users/shiho/dev/appname/app/javascript/packs/app.vue: Unknown option: base.omit. Check out http://babeljs.io/docs/usage/options/ for more information about options. A […]

Webpacker：如果没有./bin/webpack-dev-server，则无法使用public / assets / packs资产

我正在使用Rails + Webpacker（用于React npm包）。 当我尝试使用任何资产时，会发生错误： 安全警告：另一个站点上的嵌入式标记请求受保护的JavaScript 这就是为什么它不加载我的webpacker编译的资源javascript。 它只有在我运行./bin/webpack-dev-server 如何在没有./bin/webpack-dev-server情况下加载我的资产。

在窗口中运行rspec时出错：找不到Webpack binstubs

当我运行rspec我收到以下错误： C:\Users\Chloe\workspace\catalyst_research>rspec Randomized with seed 41345 FFFFFFF……………………….FFFFFFFC:/ruby24/lib/ruby/gems/2.4.0/gems/webpacker-2.0/lib/tasks/installers.rake:1: warning: already initialized constant INSTALLERS C:/ruby24/lib/ruby/gems/2.4.0/gems/webpacker-2.0/lib/tasks/installers.rake:1: warning: previous definition of INSTALLERS was here C:/ruby24/lib/ruby/gems/2.4.0/gems/webpacker-2.0/lib/tasks/webpacker/install.rake:1: warning: already initialized constant WEBPACKER_APP_TEMPLATE_PATH C:/ruby24/lib/ruby/gems/2.4.0/gems/webpacker-2.0/lib/tasks/webpacker/install.rake:1: warning: previous definition of WEBPACKER_APP_TEMPLATE_PATH was here C:/Users/Chloe/workspace/catalyst_research/lib/tasks/test.rake:6: warning: already initialized constant DRIVERS C:/Users/Chloe/workspace/catalyst_research/lib/tasks/test.rake:6: warning: previous definition of DRIVERS was here Webpack binstubs not found. Make sure the […]

Rails Webpacker 3.0导入CSS文件不起作用

我正在使用Webpacker工作Rails5项目，以便正确运行React 但是当我在我的根组件中import我的css文件时，它似乎根本不起作用。 看起来样式表根本就没有了。 这是我的根组件 import React from ‘react’ import ReactDOM from ‘react-dom’ import StartForm from ‘./insurance_form/start_form’ //import PropTypes from ‘prop-types’ import ‘react-datepicker/dist/react-datepicker.css’; // not working ReactDOM.render( , document.getElementById(‘start-form-index-container’) ) 这是我的webpack/environment.js const { environment } = require(‘@rails/webpacker’) const merge = require(‘webpack-merge’) const myCssLoaderOptions = { modules: true, sourceMap: true, localIdentName: ‘[name]__[local]___[hash:base64:5]’ } const CSSLoader = environment.loaders.get(‘style’).use.find(el […]

Vue.js应用程序在开发中工作，但没有使用Rails 5.2.0 / Webpacker在生产中安装模板 – 空白屏幕在控制台中没有错误

我正在使用Rails 5.2.0和Webpacker gem来部署Vue应用程序。 show.html.erb文件非常简单： 然后在我的入口包中，打包/ my_vue_app.js： import TurbolinksAdapter from ‘vue-turbolinks’; import Vue from ‘vue/dist/vue.esm’ Vue.use(TurbolinksAdapter); import MyComponent from ‘../components/my_app/index.vue’ document.addEventListener(‘turbolinks:load’, () => { var element = $(‘[data-behavior=”vue-app”]’); if(!element) { return }; console.log(‘Initializing Vue’); const app = new Vue({ el: element[0], data: { }, components: { MyComponent } }) }) 在开发中，一切都很好。 该应用程序已安装并正常运行。 但是在生产中，在页面加载和JS运行之后， 将从分页中删除，只留下 。 在控制台中，绝对没有错误。 […]

Rails 5 + Webpacker应用程序部署到Heroku作为空白页面，没有失败

我有一个简单的Rails 5.1应用程序，它使用Webpacker和Vue.js. 它在webpack-dev-server开发中非常webpack-dev-server 。 当我推送到Heroku存储库时，它完成时没有任何错误，也没有任何看似exception的东西。 HTML页面呈现但是应该呈现Vue.js应用程序的 元素仅由注释替换： JavaScript包文件确实在那里，我看着它，似乎都是正确的。 我尝试使用Node.js Buildpack替换正常的Ruby buildpack，然后使用Ruby Buildpack替换，但无济于事。 这是完整的Heroku部署日志： —–> Node.js app detected —–> Creating runtime environment NPM_CONFIG_LOGLEVEL=error NPM_CONFIG_PRODUCTION=true NODE_VERBOSE=false NODE_ENV=production NODE_MODULES_CACHE=true —–> Installing binaries engines.node (package.json): unspecified engines.npm (package.json): unspecified (use default) engines.yarn (package.json): unspecified (use default) Resolving node version 8.x… Downloading and installing node 8.9.4… Using default npm version: […]

Webpack模块构建失败的意外令牌（rails反应构建）

我正在进行react / rails构建，并首次使用webpack和babel。 我正在使用两个文件并收到错误 ： 错误在./app/assets/frontend/main.jsx中 模块构建失败： SyntaxError：/Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx：意外的令牌（6：6） 第6行是： 这是main.jsx文件 import Greet from ‘./greet’; class Main extends React.Component { render() { return ( ); } } let documentReady = () => { React.render( , document.getElementById(‘react’) ); }; $(documentReady); 这是greet.jsx文件： export default class Greet extends React.Component { render() { return Hello There } } 这是我的webpack.config： module.exports […]

使用webpack从react-rails应用程序中的node_modules加载字体

我有一个使用webpacker设置的react-rails应用程序。 我正在尝试使用node_modules中的字体加载font-awesome-pro。 我认为这是一项微不足道的任务，但我似乎无法找到关于如何做到这一点的任何好的文档。 这是我到目前为止： package.json依赖项： “dependencies”: { “@rails/webpacker”: “3.5”, “babel-preset-react”: “^6.24.1”, “bootstrap”: “^4.1.3”, “prop-types”: “^15.6.2”, “react”: “^16.5.2”, “react-dom”: “^16.5.2”, “react-slick”: “^0.23.1”, “react_ujs”: “^2.4.4”, “slick-carousel”: “^1.8.1”, “tachyons-z-index”: “^1.0.9” }, “devDependencies”: { “@fortawesome/fontawesome-pro”: “^5.2.0”, “babel-plugin-transform-class-properties”: “^6.24.1”, “babel-preset-env”: “^1.7.0”, “file-loader”: “^2.0.0”, “path”: “^0.12.7”, “webpack-dev-server”: “2.11.2” } file.js： var path = require(‘path’); module.exports = { test: /\.(woff(2)?|eot|otf|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, exclude: path.resolve(__dirname, […]