我正在尝试更新使用webpack的Aurelia项目，因此我可以在模板中require .scss个文件。我查看了Aurelia Skeleton project for webpack，并按照this guide提出了下面列出的webpack.config。我还包含了我的package.json文件。
我现在可以加载样式，但遇到了一个令人困惑的问题。我的bind语句都不再有效。在更新尝试之前，代码本身没有改变并且工作正常。我尝试使用two-way，one-way等，但这也不起作用。 @bindable属性始终为undefined。
<my-custom-element value.bind="something"></my-custom-element>
在MyCustomElement中，value始终为undefined，但something已正确设置。
我试过退回包版本，我认为它与aurelia-bootstrapper有关，但我不确定。
我没有关于如何调试此问题的想法。任何帮助将不胜感激。
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { optimize: { CommonsChunkPlugin }, ProvidePlugin } = require('webpack')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const project = require('./package.json');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig)
// primary config:
const title = 'Radar';
const outDir = path.resolve(__dirname, 'dist');
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
// If not done this way the plugin will try to load when only a build is required and cause it to hang.
const addDashboardPlugin = process.env.npm_lifecycle_event === 'webpack' ? [] : [new DashboardPlugin({
port: 3333
})];
const metadata = {
port: process.env.WEBPACK_PORT || 9000,
host: process.env.WEBPACK_HOST || 'localhost'
};
const cssRules = [
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: { plugins: () => [require('autoprefixer')({ browsers: ['last 2 versions'] })] }
}
]
module.exports = ({ production, server, extractCss, coverage } = {}) => ({
resolve: {
extensions: ['.js'],
modules: [srcDir, 'node_modules'],
},
entry: {
app: ['aurelia-bootstrapper'],
aurelia: Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-')),
vendor: Object.keys(project.dependencies).filter(dep => !dep.startsWith('aurelia-'))
},
devtool: production ? 'source-map' : 'inline-source-map',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js',
},
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true,
port: metadata.port,
host: metadata.host,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
module: {
rules: [
{
test: /\.scss$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
},
{
test: /\.scss$/i,
issuer: [{ test: /\.html$/i }],
loaders: ['css-loader?sourceMap', 'sass-loader?sourceMap']
},
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules,
}) : ['style-loader', ...cssRules],
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules,
},
{ test: /\.html$/i, loader: 'html-loader' },
{
test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {},
},
{ test: /\.json$/i, loader: 'json-loader' },
// use Bluebird as the global Promise implementation:
{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
]
},
plugins: [
new AureliaPlugin(),
new ModuleDependenciesPlugin({
'aurelia-dialog': ['./ai-dialog', './ai-dialog-header', './ai-dialog-footer', './ai-dialog-body',
'./attach-focus', './dialog-configuration', './dialog-controller', './dialog-options', './dialog-renderer',
'./dialog-result', './dialog-service', './lifecycle', './renderer'],
'aurelia-chart': ['./elements/chart-element', './attributes/chart-attribute', './observers/model-observer']
}),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: production ? {
removeComments: true,
collapseWhitespace: true
} : undefined,
metadata: {
title, server, baseUrl
},
}),
new CopyWebpackPlugin([
{ from: 'src/config', to: 'config' },
{ from: 'styles/img', to: 'img' }
]),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true,
})),
...when(production, new CommonsChunkPlugin({
name: 'common'
})),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.scss$/i,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
].concat(addDashboardPlugin)
})
"dependencies": {
"aurelia-animator-css": "^1.0.0",
"aurelia-application-insights": "^1.0.0",
"aurelia-binding": "^1.2.0",
"aurelia-bootstrapper": "^2.1.1",
"aurelia-chart": "^0.2.6",
"aurelia-configuration": "1.0.17",
"aurelia-dependency-injection": "^1.3.1",
"aurelia-dialog": "^1.0.0-beta.3.0.0",
"aurelia-event-aggregator": "^1.0.1",
"aurelia-fetch-client": "^1.1.2",
"aurelia-framework": "^1.1.0",
"aurelia-history": "^1.0.0",
"aurelia-history-browser": "^1.0.0",
"aurelia-logging": "^1.3.1",
"aurelia-logging-console": "^1.0.0",
"aurelia-metadata": "^1.0.3",
"aurelia-notify": "^0.8.1",
"aurelia-pal": "^1.3.0",
"aurelia-pal-browser": "^1.1.0",
"aurelia-path": "^1.0.0",
"aurelia-route-recognizer": "^1.0.0",
"aurelia-router": "^1.3.0",
"aurelia-task-queue": "^1.2.0",
"aurelia-templating": "^1.3.0",
"aurelia-templating-binding": "^1.3.0",
"aurelia-templating-resources": "^1.3.1",
"aurelia-templating-router": "^1.1.0",
"aurelia-validation": "^1.0.0",
"bluebird": "^3.3.5",
"json-loader": "^0.5.4",
... //omitted for clarity
},
"devDependencies": {
"aurelia-loader-nodejs": "^1.0.1",
"aurelia-pal-nodejs": "^1.0.0-beta.1.0.0",
"aurelia-tools": "^1.0.0",
"aurelia-webpack-plugin": "^2.0.0-rc.2",
"autoprefixer": "^7.0.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-istanbul": "^4.1.3",
"babel-plugin-lodash": "^3.2.10",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.16.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.11.6",
"concurrently": "^2.2.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^3.1.3",
"css-loader": "^0.28.1",
"eslint": "^3.12.2",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.9.0",
"html-server": "^0.1.1",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"node-sass": "^3.13.0",
"optimize-css-assets-webpack-plugin": "^1.3.2",
"package": "^1.0.1",
"postcss-loader": "^1.3.3",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"webpack": "^2.6.1",
"webpack-dashboard": "^0.2.0",
"webpack-dev-server": "^2.4.5"
}
<template>
<require from='./_nav-bar.scss'></require>
<section class="nav-bar nav-bar__group" data-grid="full">
<div data-grid="full">
<main-menu router.bind="router" data-grid="21"></main-menu>
<user-panel data-grid="3"></user-panel>
</div>
</section>
</template>
<template class="main-menu">
<ul class="main-menu__nav-list">
<li repeat.for="row of router.navigation">
<a href.bind="row.href"
data-appinsights-category="navigation"
data-appinsights-action="${row.title}"
data-text="${row.title}">
${row.title}
</a>
</li>
</ul>
</template>
import { bindable, inject } from 'aurelia-framework';
@inject(Element)
export class MainMenuCustomElement {
//This value is always undefined now
@bindable router;
constructor(element) {
this.element = element;
}
toggleMenu() {
//removed for brevity
}
}
答案 0 :(得分：0)
我将import babel-polyfill添加到main.js后将其付诸实践，将.babelrc更改为引用`.babelrc.js，如下所示：
{
"presets": [ "./.babelrc.js" ]
}
我还在骨架导航项目中加入了.babelrc.js。
// this file will be used by default by babel@7 once it is released
module.exports = {
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": [
[
"env", {
"targets": process.env.BABEL_TARGET === 'node' ? {
"node": process.env.IN_PROTRACTOR ? '6' : 'current'
} : {
"browsers": [
"last 2 versions",
"not ie <= 11"
],
"uglify": process.env.NODE_ENV === 'production',
},
"loose": true,
"modules": process.env.BABEL_TARGET === 'node' ? 'commonjs' : false,
"useBuiltIns": true
}
]
]
}