TL;DR: я могу require
все, чтобы приложение выполнялось, но если я require
модулей из теста (который находится в приложении - см. структуру dir ниже) файл, целая цепочка зависимостей прерывается.
У меня возникли трудности с require
-интервалком компонентов из моего каталога app/test
(в приложении для webpack React.js) ниже, что я не испытываю трудности с require
-из из любого другого файла в /app
папка. Это структура каталогов
app
/components/checkout.jsx
/components/button.jsx
/test/test.js
index.jsx
dist
node_modules
webpack.config.js
package.json
в моем webpack.config.js, у меня есть настройка для использования jsx-loader для моего приложения React вроде этого
entry: {
app: "./app/index"
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony',
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
Это позволяет мне требовать файлы, заканчивающиеся на расширение .jsx. Например, в /app/index.jsx
мне требуется /app/components/checkout.jsx
, выполняя
var Checkout = require('./components/Checkout')
И внутри /app/components/checkout.jsx
требуется кнопка
var Button = require('./components/Button')
поэтому, когда я требую Checkout
из index.jsx, он без проблем справляется с требованием кнопки.
Однако, из app/test/test.js, я делаю
var Checkout = require('../components/Checkout')
и веб-пакет не может найти компонент Checkout. Когда я просматриваю тесты на сервере webpack dev, он не показывает, что искалось расширение .jsx. Он искал
app/components/Checkout
app/components/Checkout.webpack.js
app/components/Checkout.web.js
app/components/Checkout.js
app/components/Checkout.json
Поэтому я попытался использовать jsx-loader
inline, как этот
var Checkout = require(jsx-loader!'../components/Checkout')
из тестового каталога, и webpack теперь может найти файл, но он выдает сообщение об ошибке, говоря, что он не может разрешить кнопку Checkout requires
. Другими словами, когда я использую require
изнутри папки app/test
, вся цепочка зависимостей выбрасывается из синхронизации.
Как я могу изменить свой файл webpack.config.js, чтобы иметь возможность требовать файлы приложений в моих тестах с этой структурой каталогов или, в более общем плане, как настроить веб-пакет для запроса файла приложения в тесте?
Update
Структура проекта
/app
/test/test.js
/index.jsx
/components/checkout.jsx (and button.jsx)
/dist
/node_modules
package.json
webpack.config.js
полная версия веб-пакета
var webpack = require('webpack');
module.exports = {
context: __dirname + "/app",
entry: {
vendors: ["d3", "jquery"],
app: "index"
// app: "./app/index"
},
output: {
path: './dist',
filename: 'bundle.js', //this is the default name, so you can skip it
//at this directory our bundle file will be available
//make sure port 8090 is used when launching webpack-dev-server
publicPath: 'http://localhost:8090/assets/'
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
// 'd3': 'd3'
},
resolve: {
modulesDirectories: ['app', 'node_modules'],
extensions: ['', '.js', '.jsx'],
resolveLoader: { fallback: __dirname + "/node_modules" },
root: ['/app', '/test']
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony',
}
]
},
plugins: [
// definePlugin,
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
}